YuhUI
Goals
Accessible React components
- Support for translations is upfront
- Follow web accessibility standards
Getting started
Using the package
$ npm install @yuhu-inc/yuhui
$ 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: {
}
};
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