Skip to content
🌈 React Rainbow Components. Build your web application in a snap.
JavaScript CSS
Branch: master
Clone or download
TahimiLeonBravo and LeandroTorresSicilia refactor: migrate ProgressStep to styled-components (#1088)
* refactor: migrate ProgressStep to styled-components

* test: fix some tests
Latest commit d1d05c3 Oct 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: move coveralls to a new step in build_and_test job (#952) Sep 17, 2019
.github Update --bug-report.md Sep 27, 2019
__mocks__ implement vertical-section-overflow right arrow (#178) Sep 14, 2018
assets fix: delete duplicate id on icons (#1055) Oct 3, 2019
examples/create-react-app chore: update packages versions in create react app example (#959) Sep 17, 2019
integration refactor: migrate Modal styled components (#1080) Oct 14, 2019
jestMatchers Add focusable tests (#433) Dec 27, 2018
library docs: add typescript item to getting started (#1069) Oct 10, 2019
scripts chore: add typescript support first commit (#995) Sep 24, 2019
src refactor: migrate ProgressStep to styled-components (#1088) Oct 16, 2019
tutorials fix: fix pageObject and tutorials on TimePicker component (#989) Sep 23, 2019
.babelrc chore: add typescript support first commit (#995) Sep 24, 2019
.eslintrc.json fix: some fixes to ImportRecordsFlow component (#868) Aug 6, 2019
.firebaserc feat: deploy to firebase with every merge in master Aug 30, 2018
.gitignore refactor: migrate InputBase to styled component (#1011) Sep 25, 2019
.npmignore chore: create .env file in ci (#532) Jan 16, 2019
.prettierignore docs: add .prettierignore and fix some details (#745) May 18, 2019
.prettierrc chore: setup prettier (#720) May 8, 2019
.stylelintrc.json chore: setup stylelint for styled-components (#984) Sep 22, 2019
CODE_OF_CONDUCT.md fix: modal content styles (#1033) Sep 29, 2019
CONTRIBUTING.md Update CONTRIBUTING.md (#965) Sep 18, 2019
CSSCONVENTION.md docs: add naming convention file (#603) Feb 9, 2019
LICENSE adding license Aug 27, 2018
README.md refactor: migrate button styled components (#1062) Oct 10, 2019
firebase.json switch to firebase hosting Jul 2, 2017
jsdoc.conf.js test: add integration tests to Table selection (#685) Apr 21, 2019
package.json chore: update version to 1.7.0 Oct 9, 2019
setupTests.js feat: added focusable matcher (#395) Nov 6, 2018
styleguide.config.js fix: keep sync in installation page title with react version used (#947) Sep 17, 2019
wdio.conf.js chore: set webdriver logLevel to silent Jun 15, 2019
yarn.lock test: add accessibility test on GoogleAddressLookup component (#1029) Sep 28, 2019

README.md


React Rainbow Component logo

React Rainbow

React Rainbow is a collection of components that will reliably help you build your application in a snap. Give it a hack and let us know what you think.

CircleCI npm version components Prettier Known Vulnerabilities Coverage Status License: MIT

Gitter

✨ Features

  • 60+ components built on top of React.
  • Interactive Examples.
  • First class testing.
  • Wdio page objects.
  • Redux-Form integration.
  • We designed each component with i18n in mind.
  • Accessibility is part of our definition of done.

πŸ–₯ Environment Support

Firefox
Firefox
Chrome
Chrome
Safari
Safari
last 2 versions last 2 versions last 2 versions

πŸ“¦ Installation

React Rainbow components is available as an npm package.

$ yarn add react-rainbow-components
or
$ npm install react-rainbow-components --save

⌨️ Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-rainbow-components';

function App() {
    return <Button label="Hello World!" variant="brand" onClick={() => alert('Hello World!')} />;
}

ReactDOM.render(<App />, document.getElementById('container'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Edit Button

You can also use individual component from bit:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@bit/nexxtway.react-rainbow.button';

function App() {
    return <Button label="Hello World!" variant="brand" onClick={() => alert('Hello World!')} />;
}

ReactDOM.render(<App />, document.getElementById('container'));


⌨️ Running locally

  1. git clone https://github.com/nexxtway/react-rainbow.git
  2. cd react-rainbow
  3. yarn install
  4. yarn start
  5. navigate to http://localhost:6060/

πŸ’¬ Questions

For how-to questions and other non-issues, please use our Gitter Chat instead of Github issues.

https://gitter.im/react-rainbow-components/community


πŸ–₯ Examples

Are you looking for an example project to get started?

We host some here.


🀝 Contributing

We are excited that you are interested in contributing to this project!

You can help us improve React Rainbow Components, the first step to begin collaborate is to create an issue before submitting a pull request, it's always good to file an issue, so we can discuss the details of your approach or suggestion.

See more details about how to collaborate?

You can’t perform that action at this time.