deku-prop-types

  

  

> Prop type validation for Deku components

Install

``bash
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
`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const Counter = ({props}) =>

Counter.propTypes = {
count: PropTypes.number.isRequired
}

export default validate(Counter)
`

object-component.jsx
`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const Counter = {
propTypes: {
count: PropTypes.number.isRequired
},
render({props}) {
return

}
}

export default validate(Counter)
`

Usage with deku-redux-connect


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

const Counter = ({props}) =>

{props.count}

Counter.propTypes = {
count: PropTypes.number.isRequired
}

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

export default connect(
mapStateToProps
)(validate(Counter))
`

Supported types

$3

Validate prop is of any type (not undefined)

$3

Validate prop is an array

$3

Validate prop is an array consisting of a type

`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const NamesList = ({props}) =>

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

export default validate(NamesList)
`

$3

Validate prop is a boolean

$3

Validate prop is a function

$3

Validate prop is an instance of a function or class

`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const ItemList ({props}) =>

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

export default validate(ItemList)
`

$3

Validate prop is a number

$3

Validate prop is an object

$3

Validate prop has keys all matching an allowed type

`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const NameCard = ({props}) =>

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

export default validate(NameCard)
`

$3

Validate prop is one of the allowed values

`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const Color = ({props}) =>

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

export default validate(Color)
`

$3

Validate prop is one of the allowed types

`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const Age = ({props}) =>

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

export default validate(Age)
`

$3

Validate an object's properties are of a certain type

`jsx
import {element} from 'deku'
import {PropTypes, validate} from 'deku-prop-types'

const ConfigDisplay = ({props}) =>

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

export default validate(ConfigDisplay)
`

$3

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.

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

const Counter = ({props}) =>

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

export default validate(Counter)
`

API

$3

#### component
type: function | object

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

#### warningLevel
type: number

default: 1

If a missing propType is discovered, validate will by default log a warning. This functionality may be configured.

0 - Do not warn or throw error

1 - Log a warning

2` - Throw an error

License

MIT © Dustin Specker