{"id":21399758,"url":"https://github.com/balena-io-modules/rendition","last_synced_at":"2025-09-27T13:32:05.435Z","repository":{"id":37242909,"uuid":"80240652","full_name":"balena-io-modules/rendition","owner":"balena-io-modules","description":"A library of React UI components","archived":false,"fork":false,"pushed_at":"2024-10-10T08:57:57.000Z","size":106219,"stargazers_count":214,"open_issues_count":133,"forks_count":27,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-01-10T22:03:47.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://balena-io-modules.github.io/rendition","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/balena-io-modules.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-27T19:50:33.000Z","updated_at":"2024-10-14T22:55:20.000Z","dependencies_parsed_at":"2024-06-18T14:06:04.793Z","dependency_job_id":"d27ab979-ad52-48c2-ba6d-977df62f8536","html_url":"https://github.com/balena-io-modules/rendition","commit_stats":{"total_commits":2172,"total_committers":49,"mean_commits":"44.326530612244895","dds":0.7394106813996317,"last_synced_commit":"9799010e2dff3b579021d1f1758bec4b845bdddc"},"previous_names":["resin-io-modules/resin-components"],"tags_count":982,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balena-io-modules%2Frendition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balena-io-modules%2Frendition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balena-io-modules%2Frendition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balena-io-modules%2Frendition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balena-io-modules","download_url":"https://codeload.github.com/balena-io-modules/rendition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234440302,"owners_count":18832980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T15:16:30.452Z","updated_at":"2025-09-27T13:32:04.959Z","avatar_url":"https://github.com/balena-io-modules.png","language":"TypeScript","readme":"# Rendition\n\n[![npm version](https://img.shields.io/npm/v/rendition)](https://img.shields.io/npm/v/rendition)\n[![Dependency Status](https://img.shields.io/librariesio/release/npm/rendition)](https://img.shields.io/librariesio/release/npm/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357\u0026colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  \u003cProvider\u003e\n    \u003cBox my={3} mx={['auto', 15]}\u003e\n      \u003cButton primary emphasized\u003eClick me\u003c/Button\u003e\n    \u003c/Box\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `\u003cProvider\u003e` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Accessing the theme object\n\nYou can access the theme object in `\u003cProvider\u003e`'s descendant components using the `useTheme` hook:\n\n```jsx\nimport React from 'react'\nimport { useTheme } from 'rendition';\n\nconst MyComponent = () =\u003e {\n  const theme = useTheme()\n\n  // ...\n}\n```\n\n### Styled system\n\nAll components support [styled-system][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\u003cstring | number\u003e`. 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.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\twidth         | `ResponsiveStyle` | sets the width\n|\tminWidth      | `ResponsiveStyle` | sets the min-width\n|\tmaxWidth      | `ResponsiveStyle` | sets the max-width\n|\theight        | `ResponsiveStyle` | sets the height\n|\tminHeight     | `ResponsiveStyle` | sets the min-height\n|\tmaxHeight     | `ResponsiveStyle` | sets the max-height\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tdisplay       | `ResponsiveStyle` | sets the `display` css property\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n\u0026ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array\u003cstring | number\u003e`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalena-io-modules%2Frendition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalena-io-modules%2Frendition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalena-io-modules%2Frendition/lists"}