Deku-prop-types NPM

deku-prop-types

Prop type validation for Deku components

Install

npm install --save deku-prop-types

Notes

Check out deku-prop-types-immutable for additional Prop Type validations for Immutable
This library is compatible with eslint-plugin-react's prop-types rule

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>
Counter.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)

Usage with deku-redux-connect

import connect from 'deku-redux-connect'
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

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

const mapStateToProps = ({count}) => ({count})

export default connect(
  mapStateToProps
)(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)