react-st-components

styled components for react

Install

NPM

```js $ npm install react-st-components --save ```

Usage

```js import ReactDOM from 'react-dom'; import {

GlobalStyle, //for the global styles

STContainer 

} from 'react-st-components'; const App = () => {

return (

<>

<GlobalStyle />

<STContainer>

{/* Rest of your code */}

</STContainer>

</>

)

} ReactDOM.render(, document.getElementById('index')) ```

Adding Theme

Wrap your application or selected parts with <STThemeProvider /> for it to pass down the themes. ```js import ReactDOM from 'react-dom'; import { STThemeProvider } from 'react-st-components'; //for theme provider import Header from './header-example'; import Contents from './contents-example'; const App = () => {

return (

<>

<STThemeProvider theme={theme}>

<Header />

<Contents />

</STThemeProvider>

</>

)

} ReactDOM.render(, document.getElementById('index')) ``` The theme prop of the <STThemeProvider /> must be an object with this structure: ```js const theme = {

tones: {

primary: '';

secondary: '';

success: '';

danger: '';

warning: ''

},

flat: true

} ``` - tones - Object containing the theme color palette(optional).

- tones.<palette> - [String] `hex` color code(optional).

- flat - Boolean if set to true, all border-radius of styled components is set to 0px(optional, defaults to false). See Docs for more styled components.