Skip to content
Standard model of UI development
JavaScript
Branch: master
Clone or download

README.md

React UI

Standard model of UI development

build status npm version

Table Of Contents

Why?

When building React apps a multitude of components is created. They end up scattered across the project, making it hard to control and use them. React UI tries to solve the problem by encapsulating all of the components into a single dependency that is used across the app:

import UI from 'src/components/ui';

const Header = () => (
  <section>
    <UI.Label>Press the button to greet everyone</UI.Label>
    <UI.Button kind="primary">Hello, GitHub!</UI.Button>
  </section>
);

Usage

npm install --save @react-ui/core

Unlike other UI related libraries, React UI doesn't include any built-in components. It rather suggests a pattern for managing components in an app. So, let's create a React UI-compatible component:

// src/components/ui/basic/button.jsx

import 'src/styles/button.css';

export default () => (props) => (
  <input type="button" className={`button-${props.kind}`}>
    {props.children}
  </input>
);

As you can see, the stateless component is wrapped by a function. It is used for passing styles in more complex use cases (explained later in the docs).

React UI exports only a single function that is used for preparing UI for the app:

// src/components/ui/index.js

import initUI from '@react-ui/core';
import Button from './button';
import Label from './label';

const components = {
  Button,
  Label,
};

const UI = initUI(components)();
export default UI;

React UI pattern revolves around the following three aspects:

Roadmap

  • docs and examples;
  • core components (as a separate repository);
  • styleguide generator;

If you have a suggestion, please, create an issue.

License

Apache License, Version 2.0

You can’t perform that action at this time.