react-st-components

styled components for react

Install

NPM

$ npm install react-st-components --save

Usage

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(<App />, document.getElementById('index'))

Adding Theme

Wrap your application or selected parts with <STThemeProvider /> for it to pass down the themes.

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(<App />, document.getElementById('index'))

The theme prop of the <STThemeProvider /> must be an object with this structure:

const theme = {
    tones: {
        primary: '';
        secondary: '';
        success: '';
        danger: '';
        warning: ''
    },
    flat: true
}

• tones - [Object] containing the theme color palette(optional).
  • tones. - [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.