To help you get started, we've collected the most common ways that rendition is being used within popular public projects.

balena-io / etcher / lib / gui / app / styled-components.tsx View on Github

&:focus,
		&:active {
			color: #8f9297;
		}
	}
`;
export const StepSelection = styled(Flex)`
	flex-wrap: wrap;
	justify-content: center;
`;
export const Footer = styled(Txt)`
	margin-top: 10px;
	color: ${colors.dark.disabled.foreground};
	font-size: 10px;
`;
export const Underline = styled(Txt.span)`
	border-bottom: 1px dotted;
	padding-bottom: 2px;
`;
export const DetailsText = styled(Txt.p)`
	color: ${colors.dark.disabled.foreground};
	margin-bottom: 0;
`;

View more ways to use rendition

Rendition

A library of UI components, built using React, styled-components and styled-system.

Table of Contents

• Installation
• Usage
• Components
• Development
• Testing
• Upgrading

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(
  
    
      <button>Click me</button>
    
  ,
  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.

*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