Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rendition

Package Overview
Dependencies
Maintainers
1
Versions
4191
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rendition

React components library

  • 35.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

NameTypeDescription
widthResponsiveStylesets the width
minWidthResponsiveStylesets the min-width
maxWidthResponsiveStylesets the max-width
heightResponsiveStylesets the height
minHeightResponsiveStylesets the min-height
maxHeightResponsiveStylesets the max-height
fontSizeResponsiveStylesets the font size
displayResponsiveStylesets the display css property
colorResponsiveStylesets the color css property
bgResponsiveStylesets the background css property
mResponsiveStylesets the margin css property
mtResponsiveStylesets the margin-top css property
mrResponsiveStylesets the margin-right css property
mbResponsiveStylesets the margin-bottom css property
mlResponsiveStylesets the margin-bottom css property
mxResponsiveStylesets both the margin-right and margin-left css properties
myResponsiveStylesets both the margin-top and margin-bottom css properties
pResponsiveStylesets the padding css property
ptResponsiveStylesets the padding-top css property
prResponsiveStylesets the padding-right css property
pbResponsiveStylesets the padding-bottom css property
plResponsiveStylesets the padding-left css property
pxResponsiveStylesets both the padding-right and padding-left css properties
pyResponsiveStylesets both the padding-top and padding-bottom css properties

*ResponsiveStyle corresponds to a type of string | number | Array<string | number>

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

FAQs

Package last updated on 05 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc