Rendition
A library of UI components, built using React, styled-components and styled-system.
Table of Contents
Installation
npm install --save rendition
Usage
Wrap your application in the Provider
component and start using components!
import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Box, Provider } from 'rendition';
ReactDOM.render(
<Provider>
<Box my={3} mx={['auto', 15]}>
<Button primary emphasized>Click me</Button>
</Box>
</Provider>,
document.getElementById('root')
);
Components
For an interactive demo of all components, see https://balena-io-modules.github.io/rendition
Provider
Wrap your application in the <Provider>
component so that child components can correctly inherit the default theme. You can optionally provide your own theme.
Accessing the theme object
You can access the theme object in <Provider>
's descendant components using the useTheme
hook:
import React from 'react'
import { useTheme } from 'rendition';
const MyComponent = () => {
const theme = useTheme()
}
Styled system
All components support styled-system attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of string | number | Array<string | number>
. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the theme
property of the Provider
component, by default this is set to [32, 48, 64, 80]
where each number is the screen width in ems.
Name | Type | Description |
---|
width | ResponsiveStyle | sets the width |
minWidth | ResponsiveStyle | sets the min-width |
maxWidth | ResponsiveStyle | sets the max-width |
height | ResponsiveStyle | sets the height |
minHeight | ResponsiveStyle | sets the min-height |
maxHeight | ResponsiveStyle | sets the max-height |
fontSize | ResponsiveStyle | sets the font size |
display | ResponsiveStyle | sets the display css property |
color | ResponsiveStyle | sets the color css property |
bg | ResponsiveStyle | sets the background css property |
m | ResponsiveStyle | sets the margin css property |
mt | ResponsiveStyle | sets the margin-top css property |
mr | ResponsiveStyle | sets the margin-right css property |
mb | ResponsiveStyle | sets the margin-bottom css property |
ml | ResponsiveStyle | sets the margin-bottom css property |
mx | ResponsiveStyle | sets both the margin-right and margin-left css properties |
my | ResponsiveStyle | sets both the margin-top and margin-bottom css properties |
p | ResponsiveStyle | sets the padding css property |
pt | ResponsiveStyle | sets the padding-top css property |
pr | ResponsiveStyle | sets the padding-right css property |
pb | ResponsiveStyle | sets the padding-bottom css property |
pl | ResponsiveStyle | sets the padding-left css property |
px | ResponsiveStyle | sets both the padding-right and padding-left css properties |
py | ResponsiveStyle | sets both the padding-top and padding-bottom css properties |
*ResponsiveStyle
corresponds to a type of string | number | Array<string | number>
Some components in the storybook
are grouped separately under the Extra
label. These components are not loaded by default
as they rely on other large packages that you may not want to include in your
application.
If you would like to use them they can be loaded using by prefixing the
component name with rendition/dist/extra/
. For example to load the Markdown
components you can use:
import { Markdown } from 'rendition/dist/extra/Markdown';
Contributing
Please read our contribution guidelines