@samwindham1/component-library ·
Introduction
This is a themable component library that uses React and styled-components. Simply import the components into your project to style and build your site.
Setup
npm install @samwindham1/component-library --save
Add the ThemeProvider
at the top-most level of your app, and supply it your theme overrides.
// app.jsx
import { ThemeProvider } from '@samwindham1/component-library';
import { theme } from './theme';
export const App = () => (
<ThemeProvider theme={theme}>
<... />
</ThemeProvider>
);
Set up your theme overrides (See below for theme structure):
// theme.js
export const theme = {
color: {
primary: 'blue'
...
},
button: {
color: 'magenta'
...
},
...
}
Import and use a component:
// Component.jsx
import { Button } from '@samwindham1/component-library';
const Component = () => (
<>
...
<Button label={'Label'} onClick={() => {}} />
</>
);
Components:
Default Props
prop | type | default | description |
---|---|---|---|
id | string | [empty string] | custom id |
disabled | boolean | false | |
classes | string | [empty string] | custom classnames |
Button
prop | type | default | description |
---|---|---|---|
label | string | ||
onClick | () => void | onClick event function |
Checkbox
prop | type | default | description |
---|---|---|---|
label | string | ||
checked | boolean | parent component needs to control the state | |
onChange | (value: boolean) => void | onChange function to control the parent state |
TextInput
prop | type | default | description |
---|---|---|---|
value | string | parent component needs to control the state | |
onChange | (value: string) => void | onChange function to control the parent state |