Need help with rendition?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

balena-io-modules
165 Stars 30 Forks Apache License 2.0 2.1K Commits 99 Opened issues

Description

A library of React UI components

Services available

!
?

Need anything else?

Contributors list

Rendition

npm version Dependency Status style: styled-components

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( 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 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
. 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

Extra components

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.