rts-react-components--testing-branch v0.0.1
:construction: In beta: This project is still in an unstable, beta stage. See Issues to know what's upcoming. :construction:
RTS React Components
A library of style-agnostic React components to be reused across projects.
Installation
If you want to start using a boilerplate project instead checkout the rts-react-boilerplate git.
Step 1 - Download
Option 1 - Contribute
Use this option if you plan on contributing to this repo.
- Submodule the
rts-react-componentsrepository. The below command will put the submodule into thesrcfolder.git submodule add git@github.com:rtslabs/rts-react-components.git src/rts-react-components
Option 2 - Non-contribute
Use this option if you don't want to contribute to this repo.
- Check
reposection - run
npm install git+https://<token-from-github>:x-oauth-basic@github.com/rtslabs/rts-react-components.git --prefix ./srcDon't save your key in the package.json file - move
rts-react-componentsoutside of newnode_modulesfolder & delete thenode_modulesfolder
Step 2 - Dependencies
:warning: This section will soon be deprecated.
- run
npm install bootstrap@4.0.0-beta.2 --save - add
import 'bootstrap/dist/css/bootstrap.css';to your index.js file. - copy
theme.jsfile fromrts-react-componentsto yoursrcfolder. - add
import Typography from './rts-react-components/typography';to the top of yourApp.jsfile, and add<Typography/>to the top of your render.
Usage
Prop Names
:warning: This section will soon be deprecated.
All components, as well as their nested items use a universal set of prop names. If you think a component should support one of these props, but it doesn't, make a request to add it.
| Name | Class | Type | Description |
|---|---|---|---|
| theme | array | Optionally pass in theme JSON | |
| className | forward | string | Forwards prop |
| style | forward | object | Forwards prop |
| onClick | forward | func | Forwards prop |
| bgColor | color | string | Background color |
| textColor | color | string | Text Color |
| dark | color | bool | Easy way to theme |
| borderColor | color | bool | Border Color |
| text | text | string | Text content |
| subText | text | string | Small text below main text |
| textRight | text | string | Text content aligned right |
| subTextRight | text | string | Small text below aligned right text |
| link | link | string | |
| linkIcon | link | string | |
| img | image | string | Image |
| header | content | object | Defines header for component |
| footer | content | object | Defines footer for component |
| items | content | array | Array of items which support these prop names |
| item | content | object | Custom item to add to an array |
| height | size | number | |
| width | size | number | |
| container | size | bool | Add container within outer bg wrapper |
| icon | icon | string | |
| iconSize | icon | number | |
| iconRight | icon | string | |
| iconRightSize | icon | number | |
| iconTop | icon | string | |
| iconTopSize | icon | number |
Maintainers
The front end team on @rtslabs/hsa is responsible for updates.
Main contacts:
- Chris M. (@cmonaccio)
- Caitlin (@CaitlinWeb)
7 years ago