deku-prop-types

deku-prop-types

Prop type validation for Deku components

Install

npm install --save deku-prop-types

Usage

function-component.jsx

import {element} from 'deku'
import {propTypes, validate} from 'deku-prop-types'

const Counter = ({props}) => <div>{props.count}</div>
Count.propTypes = {
  count: propTypes.number.isRequired
}

export default validate(Counter)

object-component.jsx

import {element} from 'deku'
import {propTypes, validate} from 'deku-prop-types'

const Counter = {
  propTypes: {
    count: propTypes.number.isRequired
  },
  render({props}) {
    return <div>{props.count}</div>
  }
}

export default validate(Counter)

Supported types

propTypes.any

Validate prop is of any type (not undefined)

propTypes.array

Validate prop is an array

propTypes.arrayOf

Validate prop is an array consisting of a type

import {element} from 'deku'
import {validate} from 'deku-prop-types'

const NamesList = ({props}) => <div>
  {props.names.map(name => <div>{name}</div>)}
</div>

NamesList.propTypes = {
  names: propTypes.arrayOf(propTypes.string)
}

export default validate(NamesList)

propTypes.bool

Validate prop is a boolean

propTypes.func

Validate prop is a function

propTypes.number

Validate prop is a number

propTypes.object

Validate prop is an object

propTypes.string

Validate prop is a string

Note: all propTypes can be required by specifying isRequired like below:

propTypes.number.isRequired

Custom Validators

A function may be passed instead of a propType.

import {element} from 'deku'
import {validate} from 'deku-prop-types'

const Counter = ({props}) => <div>{props.count}</div>
Counter.propTypes = {
  count(props, propName) {
    if (props[propName] < 10) {
      throw new Error('count must be less than 10')
    }
  }
}

export default validate(Counter)

API

validate(component)

component

type: function | object

Validate props passed to component match the specified type. An Error is thrown if a prop is not valid.

License

MIT © Dustin Specker