: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.

1. Submodule the rts-react-components repository. The below command will put the submodule into the src folder. git submodule add [email protected]: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.

1. Create a Personal Access Token

• Check repo section
• run npm install git+https://<token-from-github>:[email protected]/rtslabs/rts-react-components.git --prefix ./src ** Don't save your key in the package.json file **
• move rts-react-components outside of new node_modules folder & delete the node_modules folder

Step 2 - Dependencies

:warning: This section will soon be deprecated.

• run npm install [email protected] --save
• add import 'bootstrap/dist/css/bootstrap.css'; to your index.js file.
• copy theme.js file from rts-react-components to your src folder.
• add import Typography from './rts-react-components/typography'; to the top of your App.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)

See contributors for other contacts.