YuhUI

Goals

Accessible React components

• Support for translations is upfront
• Follow web accessibility standards

Getting started

Using the package

$ npm install @yuhu-inc/yuhui # or
$ yarn add @yuhu-inc/yuhui

Developing

$ yarn storybook

Running tests

$ yarn watch

Publishing

$ yarn publish --access public

Basics

The component library relies on a component called <ContentProvider /> to provide content (copy and styles) to its children components.

Example

Create an object with contentNodes and theme as keys. contentNodes is an object with its key being the name of the "content piece" that can be referenced in other components. Its value is includes translated copies. The theme API is still quite unstable and can be updated with breaking changes often.

const content = {
  contentNodes: {
    nodeName: {
      copy: {
        en: "an example",
        fr: "un exemple"
      }
    }
  },
  theme: {
    /* stuff */
  }
};

Pass the content object into the ContentProvider as a prop.

import { ContentProvider } from "@yuhuinc/yuhui";

const Example = ({ children }) => (
  <ContentProvider content={content} lang="en">
    {children}
  </ContentProvider>
);

Then you can reference the key name of the content node in components.

import { P } from "@yuhuinc/yuhui";

const App = () => (
  <Example>
    <P>You can still do this, but what's below instead:</P>
    <P key="nodeName" />
  </Example>
);

Resources

• A11Y Style Guide
• Reakit