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-components
repository. The below command will put the submodule into thesrc
folder.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
repo
section - run
npm install git+https://<token-from-github>:x-oauth-basic@github.com/rtslabs/rts-react-components.git --prefix ./src
Don't save your key in the package.json file - move
rts-react-components
outside of newnode_modules
folder & delete thenode_modules
folder
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.js
file fromrts-react-components
to yoursrc
folder. - add
import Typography from './rts-react-components/typography';
to the top of yourApp.js
file, 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)
5 years ago