@react-ui/core

1.0.0-beta4 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @react-ui/core

Weekly Downloads

3

Version

1.0.0-beta4

License

MIT

Last publish

Collaborators

  • siddharthkp
  • siddharthkp2
  • evgenyrodionov