deku-prop-types

deku-prop-types

Prop type validation for Deku components

Install

npm install --save deku-prop-types

Usage

Note: propType validations are not performed in production environments

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 {propTypes, 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.instanceOf

Validate prop is an instance of a function or class

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

const ItemList ({props}) => <div>
  {props.list.map(item => <div>{item}</div>)}
</div>

ItemList.propTypes = {
  list: propTypes.instanceOf(Array)
}

export default validate(ItemList)

propTypes.number

Validate prop is a number

propTypes.object

Validate prop is an object

propTypes.objectOf

Validate prop has keys all matching an allowed type

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

const NameCard = ({props}) => <div>{props.person.firstName + ' ' + props.person.lastName}</div>

NameCard.propTypes = {
  person: propTypes.objectOf(propTypes.string)
}

export default validate(NameCard)

propTypes.oneOf

Validate prop is one of the allowed values

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

const Color = ({props}) => <div>{props.color}</div>

Color.propTypes = {
  color: propTypes.oneOf(['red', 'green', 'blue'])
}

export default validate(Color)

propTypes.oneOfType

Validate prop is one of the allowed types

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

const Age = ({props}) => <div>{props.age}</div>

Age.propTypes = {
  age: propTypes.oneOfType([propTypes.number, propTypes.number])
}

export default validate(Age)

propTypes.shape

Validate an object's properties are of a certain type

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

const ConfigDisplay = ({props}) => <div>{props.config.port + ' ' + props.config.host}</div>

ConfigDisplay.propTypes = {
  config: propTypes.shape({
    host: propTypes.string,
    port: propTypes.number
  })
}

export default validate(ConfigDisplay)

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) {
      return 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