React Universal UI

Cross-platform (React Native and Web Browser) React, React Native's UI components to re-use everywhere.

Platforms

Native platforms: iOs, Android (for Mac, Windows or Linux we could just use Atom to bring our React Native code on it's web and have that same code-base run on Native environment when they got better support for React Native building block).

Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

Overview

"React Universal UI" is a cross-platform React's UI Kit - which could be run on both Web Browser and React Native environment, write once and use everywhere.

See home page for detailed documentation and tutorials (the site is under construction and will be ready soon)

require env

require yarn, react-native-cli

npm install -g yarn react-native-cli

Quick start

Existing Web or React Native project:

Install react-universal-ui package (no further config required)

npm install --save react-universal-ui

Install and configure react-native-web using their instruction (optional, only need on Web project)
Wrap your root component under RuuiProvider

import { RuuiProvider } from 'react-universal-ui';
import App from './app';

const AppContainer = () => {
  return <RuuiProvider>
    <App/>
  </RuuiProvider>;
};

New project:

React Universal UI come with it's own cli (command line interface), install it by..

npm install -g ruui-cli

With ruui-cli installed globally.. we should now able to use ruui command to create a new project:

ruui init SuperCoolProject

This will take a while when cli create the project structure for us as well as install necessary dependencies..

Run ruui dev under your React Universal UI project folder..

cd SuperCoolProject
ruui dev

*note: the project totally generated using react-native-cli, which mean it is a valid React Native project.. we could run it normally with:

react-native run-ios
react-native run-android

How it work

React Native:

Essentially this is just a normal React Native UI Library - which absolutely work with React Native's ecosystem. Feel free to use those UI with your favorite React Native library even if you don't care about Browser yet (but believe me, you'll love it - Browser run give us tons of cool stuff).

Browser:

React Native Web let us run our React Native code on Browser and React Universal UI (this project) cares about behavior of those components on Browser.

Universal:

There're some differences between React Native and Web building block - such as Routing, Touch/Mouse handling... this project cares and provide support for those differences (there're helpers under utils module), which save your time and let you focus on write your Universal App.

Components and status

Related projects

Material UI, heavily inspired by their great component design for Web! My job is make it work in Native way.
Ionic 2, As a fan of Ionic - their ecosystem and design is a great reference for me when developing this project.
React Native Drawer
React Native Vector Icons
React Native Tab View, their great Animated Tab View component was clone and customized inside this package.

License

This project is licensed under the MIT License.

Contributing

This project under main support of Rooxim Company.

We're exciting to see more contribution from community, by contributing your code to ruui you agree to license your contribution under the MIT license.

cloudle/ruui