{"id":13679807,"url":"https://github.com/cloudle/ruui","last_synced_at":"2025-07-18T13:36:40.974Z","repository":{"id":16966119,"uuid":"80936512","full_name":"cloudle/ruui","owner":"cloudle","description":"React's cross-platform UI for Web and Native (Android, iOs)","archived":false,"fork":false,"pushed_at":"2023-01-06T01:43:19.000Z","size":7034,"stargazers_count":111,"open_issues_count":32,"forks_count":9,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-05T03:13:28.786Z","etag":null,"topics":["cross-platform","ionic","material-ui","react","react-native","react-native-web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudle.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-04T17:45:50.000Z","updated_at":"2023-10-20T07:00:16.000Z","dependencies_parsed_at":"2023-01-13T19:06:00.236Z","dependency_job_id":null,"html_url":"https://github.com/cloudle/ruui","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudle%2Fruui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudle%2Fruui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudle%2Fruui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudle%2Fruui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudle","download_url":"https://codeload.github.com/cloudle/ruui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244066184,"owners_count":20392406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","ionic","material-ui","react","react-native","react-native-web"],"created_at":"2024-08-02T13:01:09.806Z","updated_at":"2025-03-17T16:11:43.298Z","avatar_url":"https://github.com/cloudle.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Universal UI\n\n[![Build Status][travis-image]][travis-url]\n[![npm version][npm-image]][npm-url]\n\nCross-platform (**React Native** and **Web Browser**) [React][react-url], [React Native][react-native-url]'s UI components to re-use everywhere.\n\n## Platforms\n\n**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).\n\n**Browser support**: Chrome, Firefox, Safari \u003e= 7, IE 10, Edge.\n\n[npm-image]: https://badge.fury.io/js/react-universal-ui.svg\n[npm-url]: https://npmjs.org/package/react-universal-ui\n[travis-image]: https://travis-ci.org/cloudle/ruui.svg?branch=master\n[travis-url]: https://travis-ci.org/cloudle/ruui\n[github-url]: https://github.com/cloudle/ruui\n[react-url]: https://facebook.github.io/react/\n[react-native-url]: https://facebook.github.io/react-native/\n[react-native-web-url]: https://github.com/necolas/react-native-web\n[boilerplate-url]: https://github.com/cloudle/react-universal-ui-boilerplate\n[next-boilerplate-url]: https://github.com/cloudle/universal-ui-next-boilerplate\n[material-ui-url]: http://www.material-ui.com/\n[ionic-url]: http://ionicframework.com/docs/v2/components/#overview\n[react-native-vector-icon-url]: https://github.com/oblador/react-native-vector-icons\n[react-native-tab-view-url]: https://github.com/react-native-community/react-native-tab-view\n[cloud-vector-icons]: https://github.com/cloudle/react-native-vector-icons\n[react-native-drawer-url]: https://github.com/root-two/react-native-drawer\n[home-url]: http://ruui.cool\n[rooxim-url]: https://www.rooxim.com/\n[ruui-home]: https://github.com/cloudle/ruuiHome\n\n## Overview\n\"**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**.\n\n#### **See [home page][home-url] for detailed documentation and tutorials (the site is under construction and will be ready soon)**\n\n## require env\nrequire `yarn`, `react-native-cli`\n\n```\nnpm install -g yarn react-native-cli\n```\n\n## Quick start\n### Existing Web or React Native project:\n1. Install `react-universal-ui` package (no further config required)\n```\nnpm install --save react-universal-ui\n```\n2. Install and configure react-native-web using [their instruction](https://github.com/necolas/react-native-web) (optional, only need on Web project)\n\n3. Wrap your root component under RuuiProvider\n```\nimport { RuuiProvider } from 'react-universal-ui';\nimport App from './app';\n\nconst AppContainer = () =\u003e {\n  return \u003cRuuiProvider\u003e\n    \u003cApp/\u003e\n  \u003c/RuuiProvider\u003e;\n};\n```\n\n### New project:\nReact Universal UI come with it's own `cli` (command line interface), install it by..\n```\nnpm install -g ruui-cli\n```\n\nWith `ruui-cli` installed globally.. we should now able to use `ruui` command to *create a new project*:\n```\nruui init SuperCoolProject\n```\n_This will take a while when `cli` create the project structure for us as well as install necessary dependencies.._\n\nRun `ruui dev` under your React Universal UI project folder..\n```\ncd SuperCoolProject\nruui dev\n```\n*note: the project totally generated using `react-native-cli`, which mean it is a valid `React Native` project.. we could run it normally with:\n```\nreact-native run-ios\nreact-native run-android\n```\n\n## How it work\n#### React Native:\nEssentially this is just a normal [React Native][react-native-url] UI Library - which absolutely work with [React Native][react-native-url]'s ecosystem. Feel free to use those UI with your favorite [React Native][react-native-url] 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)*.\n\n#### Browser:\n[React Native Web][react-native-web-url] let us run our [React Native][react-native-url] code on **Browser** and **[React Universal UI][github-url]** (this project) cares about behavior of those components on **Browser**.\n\n#### Universal:\nThere'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.\n\n## Components and status\n- [x] Cross-platform Navigation, Routing integration\n  - [x] Native Navigation (based on React Native's ExperimentalNavigation)\n  - [x] React-Router for Web/Native (Full-featured Browser support, fallback to Memory Navigation History for [React Native][react-native-url])\n  - [x] Redux helpers\n- [x] Context Provider\n - [x] Reactive device common info (e.g Network info, Screen size..)\n - [x] Configurable theme (skin)\n- [x] Switches (exposed from [react-native-web][react-native-web-url])\n- [x] Button Component\n  - [x] Ripple effect\n  - [x] Fade effect\n  - [x] Raised style\n  - [x] Icon Button\n  - [x] Tooltip (from 12 directions - Web only)\n- [x] Text Input Component (Material-inspired, but highly customizable)\n  - [x] Underline effect\n  - [x] Floating label\n  - [x] Force label-floating\n  - [ ] Field Error\n  - [x] Hint\n  - [ ] Multi-line\n  - [ ] Number, currency, datetime masking\n  - [x] Tooltip (Web only - Alpha implementation)\n- [x] Multi layer modals\n  - [x] Pop-up style (Alert, Prompt..)\n  - [x] Full-screen style\n- [x] Dropdown\n  - [x] DropdownContainer (similar to a View, but could host a Dropdown component)\n  - [x] Configurable dropdown from 12 directions, passing context..\n- [x] Loading Mask\n- [x] Snackbar\n- [x] Selector Api, Select component\n- [x] Animated Tab View\n  - [x] Essential module export - for generic use case\n  - [ ] App intro slider\n  - [ ] Tab View scene with headers\n  - [ ] Image slider\n- [ ] Action sheets\n- [ ] Swipe-able segments\n- [ ] Datetime picker\n- [ ] Radio\n- [ ] Checkbox\n- [x] Range Slider\n- [x] Connection status (mask)\n\n## Related projects\n* [Material UI][material-ui-url], heavily inspired by their great component design for **Web**! My job is make it work in **Native** way.\n* [Ionic 2][ionic-url], As a fan of Ionic - their **ecosystem** and **design** is a great reference for me when developing **this project**.\n* [React Native Drawer][react-native-drawer-url]\n* [React Native Vector Icons][react-native-vector-icon-url]\n* [React Native Tab View][react-native-tab-view-url], their great Animated Tab View component was clone and customized inside this package.\n\n# License\n\nThis project is licensed under the MIT License.\n\n# Contributing\nThis project under main support of [Rooxim Company.](https://www.rooxim.com/) \n\nWe're exciting to see more contribution from community, by contributing your code to [ruui][github-url] you agree to license your contribution under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudle%2Fruui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudle%2Fruui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudle%2Fruui/lists"}