# onno-react > Onno propTypes for React Latest version **1.0.0** (published 2019-06-25) · MIT license · 0 weekly downloads ## Install ```sh npm install onno-react pnpm add onno-react yarn add onno-react bun add onno-react ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2019-06-25 | | First published | 2019-05-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 58.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 107 | | Author | Matthew Wagerfield | | Maintainers | wagerfield | | Keywords | onno, react, css-in-js | ## Links - npm: https://www.npmjs.com/package/onno-react - Repository: https://github.com/wagerfield/onno - Homepage: https://onnojs.com - Issues: https://github.com/wagerfield/onno/issues - npm.io page: https://npm.io/package/onno-react ## Dependencies (3) - [onno](https://npm.io/package/onno.md) 1.0.0 - [prop-types](https://npm.io/package/prop-types.md) 15.7.2 - [@types/prop-types](https://npm.io/package/@types/prop-types.md) 15.7.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2019-06-25 - 0.6.0 — 2019-06-14 - 0.5.4 — 2019-06-13 - 0.5.3 — 2019-06-12 - 0.5.2 — 2019-06-12 - 0.5.1 — 2019-06-10 - 0.5.0 — 2019-06-10 - 0.4.8 — 2019-06-10 - 0.4.7 — 2019-06-09 - 0.4.6 — 2019-06-08 - 0.4.5 — 2019-06-08 - 0.4.4 — 2019-06-08 - 0.4.3 — 2019-06-07 - 0.4.2 — 2019-06-07 - 0.4.1 — 2019-06-07 - … 23 more at https://npm.io/package/onno-react/versions ## README # [![onno-react](https://raw.githubusercontent.com/wagerfield/onno/master/assets/onno-react.svg?sanitize=true)][onno] [![Code Coverage](https://img.shields.io/codecov/c/github/wagerfield/onno.svg?color=4C8&style=flat-square)][codecov] [![Bundle Size](https://img.shields.io/bundlephobia/minzip/onno-react.svg?color=4C8&style=flat-square&label=size)][bundlephobia] [![Build Status](https://img.shields.io/circleci/build/github/wagerfield/onno.svg?color=4C8&style=flat-square)][circleci] [![License](https://img.shields.io/github/license/wagerfield/onno.svg?color=4C8&style=flat-square)][license] Onno `propTypes` for [React][react-prop-types] yarn add onno-react ## Usage You can use `onno-react` in place of `onno` since it re-exports the API: ```jsx import styled from "styled-components" import { display, padding } from "onno-react" const Box = styled.div(display, padding) // [{ display: "flex" }, { padding: "10px" }] // [{ display: "grid" }, { padding: "20em" }] ``` To add `propTypes` for onno's render functions to your components: ```jsx import styled from "styled-components" import { display, padding, propTypes } from "onno-react" const Box = styled.div(display, padding) Box.propTypes = propTypes(display, padding) // Warning: Failed prop type: Invalid prop "display" supplied to "Box". // Warning: Failed prop type: Invalid prop "padding" supplied to "Box". // Warning: Failed prop type: Invalid prop "d" supplied to "Box". // Warning: Failed prop type: Invalid prop "p" supplied to "Box". ``` Render functions can be passed to `propTypes` as an array _or_ list of arguments: ```js import { display, padding, propTypes } from "onno-react" // Array of render functions const propTypes2 = propTypes([display, padding]) // List of render functions const propTypes1 = propTypes(display, padding) ``` Following DRY principles, wrap your render functions in an array _or_ use onno's `compose` method: ```jsx import styled from "styled-components" import { display, padding, compose, propTypes } from "onno-react" const styles = [display, padding] const boxSet = compose({ name: "box", renderers: styles }) // Spread the styles array const Box1 = styled.div(...styles) Box1.propTypes = propTypes(styles) // Pass the composed renderer const Box2 = styled.div(boxSet) Box2.propTypes = propTypes(boxSet) ``` To add other `propTypes` alongside the render function props: ```jsx import styled from "styled-components" import { display, padding, propTypes } from "onno-react" import { number, string } from "prop-types" const styles = [display, padding] const Box = styled.div(...styles) Box.propTypes = { ...propTypes(styles), foo: string.isRequired, bar: number.isRequired } ``` ## Sanitizing Props To sanitize `props` before applying them to a component, you can use onno's [`omit`][onno-omit] function: ```js import { omit, display, padding } from "onno-react" const omitPropsKeys = omit({ propsKeys: ["foo", "bar"] }) const omitRenderers = omit({ renderers: [display, padding] }) const omitComposite = omit({ propsKeys: ["foo", "bar"], renderers: [display, padding] }) const props = { foo: "foo", bar: "bar", baz: "baz", display: "block", d: "inline-block", padding: 4, p: 8 } // { // baz: "baz", // display: "block", // d: "inline-block", // padding: 4, // p: 8 // } omitPropsKeys(props) // { // foo: "foo", // bar: "bar", // baz: "baz" // } omitRenderers(props) // { // baz: "baz" // } omitComposite(props) ``` ## Author [Matthew Wagerfield][github] ## License [MIT][license] [onno]: https://onnojs.com [onno-omit]: https://github.com/wagerfield/onno/blob/master/docs/utils.md#omit [github]: https://github.com/wagerfield [license]: https://github.com/wagerfield/onno/blob/master/license [bundlephobia]: https://bundlephobia.com/result?p=onno-react [circleci]: https://circleci.com/gh/wagerfield/onno [codecov]: https://codecov.io/gh/wagerfield/onno [react-prop-types]: https://reactjs.org/docs/typechecking-with-proptypes --- _Source: https://npm.io/package/onno-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._