Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@yuhu-inc/yuhui

Package Overview
Dependencies
5
Maintainers
3
Versions
3
Issues
File Explorer

Advanced tools

@yuhu-inc/yuhui

## Goals

    0.2.4latest

Version published
Maintainers
3
Yearly downloads
1,922

Weekly downloads

Readme

Source

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
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc