0.0.1 • Published 5 years ago

rts-react-components--testing-branch v0.0.1

Weekly downloads
5
License
-
Repository
-
Last release
5 years ago

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

  1. Create a Personal Access Token
  • 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 new node_modules folder & delete the node_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 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.

NameClassTypeDescription
themearrayOptionally pass in theme JSON
classNameforwardstringForwards prop
styleforwardobjectForwards prop
onClickforwardfuncForwards prop
bgColorcolorstringBackground color
textColorcolorstringText Color
darkcolorboolEasy way to theme
borderColorcolorboolBorder Color
texttextstringText content
subTexttextstringSmall text below main text
textRighttextstringText content aligned right
subTextRighttextstringSmall text below aligned right text
linklinkstring
linkIconlinkstring
imgimagestringImage
headercontentobjectDefines header for component
footercontentobjectDefines footer for component
itemscontentarrayArray of items which support these prop names
itemcontentobjectCustom item to add to an array
heightsizenumber
widthsizenumber
containersizeboolAdd container within outer bg wrapper
iconiconstring
iconSizeiconnumber
iconRighticonstring
iconRightSizeiconnumber
iconTopiconstring
iconTopSizeiconnumber

Maintainers

The front end team on @rtslabs/hsa is responsible for updates.

Main contacts:

See contributors for other contacts.