balena-io-modules/ rendition
About the developer
194 Stars 
29 Forks 
Apache License 2.0 
2.6K Commits 
139 Opened issues 
Description
A library of React UI components
Services available
Contributors list
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
Providercomponent and start using components!
import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Box, Provider } from 'rendition';
ReactDOM.render(
Click me
,
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
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
's descendant components using theuseThemehook:
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. 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
themeproperty of the
Providercomponent, 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
displaycss property | color |
ResponsiveStyle| sets the
colorcss property | bg |
ResponsiveStyle| sets the
backgroundcss property | m |
ResponsiveStyle| sets the
margincss property | mt |
ResponsiveStyle| sets the
margin-topcss property | mr |
ResponsiveStyle| sets the
margin-rightcss property | mb |
ResponsiveStyle| sets the
margin-bottomcss property | ml |
ResponsiveStyle| sets the
margin-bottomcss property | mx |
ResponsiveStyle| sets both the
margin-rightand
margin-leftcss properties | my |
ResponsiveStyle| sets both the
margin-topand
margin-bottomcss properties | p |
ResponsiveStyle| sets the
paddingcss property | pt |
ResponsiveStyle| sets the
padding-topcss property | pr |
ResponsiveStyle| sets the
padding-rightcss property | pb |
ResponsiveStyle| sets the
padding-bottomcss property | pl |
ResponsiveStyle| sets the
padding-leftcss property | px |
ResponsiveStyle| sets both the
padding-rightand
padding-leftcss properties | py |
ResponsiveStyle| sets both the
padding-topand
padding-bottomcss properties
*
ResponsiveStylecorresponds to a type of
string | number | Array
Extra components
Some components in the storybook are grouped separately under the
Extralabel. 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
Markdowncomponents you can use:
import { Markdown } from 'rendition/dist/extra/Markdown';
Contributing
Please read our contribution guidelines