Alternative syntax for prop types powered by io-ts
How it works
The @props
decorator sets propTypes
on the target component to use a
custom validator function built around
io-ts
types.
Usage
// define the runtime types // extract the static type
Without decorators
...
Errors on console
Alert type="foo" / // => Invalid value "foo" supplied to : Props/type: AlertType
Alert type="info" foo="bar" / // => Invalid additional prop(s): ["foo"]
Excess Property Checks
By default prop-types-ts
performs excess property checks. You can opt-out passing an option
argument to props
Pre-defined types
prop-types-ts
exports some useful pre-defined types:
ReactElement
ReactChild
ReactFragment
ReactNode
children
Type checking Use the children
option
Alert type="info"</Alert> // => Invalid value 1 supplied to children: stringAlert type="info"hello</Alert> // no errors
You can use any io-ts type
Alert type="info"hello</Alert> // => Invalid value "hello" supplied to children: [string, ReactChild]Alert type="info"hello <b>world</b>/Alert // no errors
works for Component
s too
Alert type="info"hello</Alert> // => Invalid value "hello" supplied to children: JSXButtonAlert type="info"buttonClick me</button>/Alert // no errors
TypeScript compatibility
prop-type-ts version |
required typescript version |
---|---|
0.7.x+ | 3.5+ |
0.6.x+ | 3.2+ |