Getting Started

Quick introduction to working with the component library

Installation

This UI library is dependant on StyledComponents. So every component in the library can be customized in the StyleComponents way

Installing the package for NPM. use node version 8+

$ npm install @wigxel/react-components styled-components

Installing the package from Yarn

$ yarn add @wigxel/react-components styled-components

Adding Theme Variables

Create a Theme.js file

# bash
> touch src/Theme.js

Copy the Default Theme snippet below into the recently created Theme.js file.

src/Theme.js

export default {
	colors: {
		primary: "#705DF5",
		accent: "#FFAA00",
		danger: "#E56464",
		grey: "#878787",
		greylight: "#848484",
		navbar: "#FDFDFD",
	},
	
	padding: {
		6: "2rem",
		12: "2.5rem",
	},
	
	alert: {
		info: { bg: "beige", text: "dodgerblue" },
		invite: { bg: "dodgerblue", text: "white" }
	},
	
	timeline: {
		borderColor: "blue",
		hoverColor: "whitesmoke"
	},
	
	...
}

Next, we have to pass the Theme variables via StyleComponents ThemeProvider.

src/App.js

import { ThemeProvider } from 'styled-components'
import Theme from './Theme.js'

export default function App () {
    return 
    <ThemeProvider theme={Theme}>
        {/** 
            Using Components within the Theme Provider to add style 
            automatically 
        **/}
    </ThemeProvider>
}