miguelramosfdz / ruui

React's cross-platform UI for Web, Native (Android, iOs)

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 (we'll need more customize to make it run on another native places like Mac, Windows or Linux - currently I got no plan for those platforms).

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.

Checkout demo and detailed documentations for live example.

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.

Quick start

To install it in your app:

npm install --save react-universal-ui

####Alternatively, you can start with react-universal-ui boilerplate which have more complete structure to work on cross-platform React Native project.

Status

This is a work in progress, right now here's what is done:

• Cross-platform react-native-vector-icon with my fork
• ResponsibleTouchArea (Reuseable Ripple Effect).
• Cross-platform Drawer (Aka Side Menus - based on react-native-drawer)
• Cross-platform Navigation, Routing integration
  • Native Navigation (based on React Native's ExperimentalNavigation)
  • React-Router for Web/Native (Full-featured Browser support, fallback to Memory Navigation History for React Native)
  • Redux helpers
• Switches (exposed from react-native-web)
• Button Component
  • Ripple effect
  • Fade effect
  • Raised style
  • Icon Button
  • Tooltip (Web only)
• Text Input Component (Material-inspired, but highly customizable)
  • Underline effect
  • Floating label
  • Force label-floating
  • Field Error
  • Hint
  • Multi-line
  • Number, currency, datetime masking
  • Tooltip (Web only)
• Modal
• Loading Mask (mobile)
• Radio
• Snackbar
• Select field (mostly for Web)
• Selector API and Selector components for Native.
• Picker Components
  • Datetime picker
  • Scroll Picker

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

License

MIT