Onno propTypes for React

yarn add onno-react

Usage

You can use onno-react in place of onno since it re-exports the API:

import styled from "styled-components"
import { display, padding } from "onno-react"

const Box = styled.div(display, padding)

// [{ display: "flex" }, { padding: "10px" }]
<Box display="flex" padding="10px" />

// [{ display: "grid" }, { padding: "20em" }]
<Box d="grid" p="20em" />

To add propTypes for onno's render functions to your components:

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".
<Box display={true} padding={[false]} />

// Warning: Failed prop type: Invalid prop "d" supplied to "Box".
// Warning: Failed prop type: Invalid prop "p" supplied to "Box".
<Box d={true} p={[false]} />

Render functions can be passed to propTypes as an array or list of arguments:

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:

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:

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 function:

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

License

MIT