Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gcanti/prop-types-ts
Alternative syntax for prop types providing both static and runtime type safety, powered by io-ts
https://github.com/gcanti/prop-types-ts
proptype-validators proptypes react typescript validation
Last synced: about 2 months ago
JSON representation
Alternative syntax for prop types providing both static and runtime type safety, powered by io-ts
- Host: GitHub
- URL: https://github.com/gcanti/prop-types-ts
- Owner: gcanti
- License: mit
- Created: 2017-02-12T18:06:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-05T09:37:22.000Z (over 4 years ago)
- Last Synced: 2024-08-02T12:15:37.235Z (about 2 months ago)
- Topics: proptype-validators, proptypes, react, typescript, validation
- Language: TypeScript
- Homepage:
- Size: 85.9 KB
- Stars: 170
- Watchers: 5
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Alternative syntax for prop types powered by [io-ts](https://github.com/gcanti/io-ts)
# How it works
The `@props` decorator sets `propTypes` on the target component to use a
[custom validator function](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) built around
`io-ts` types.
# Usage
```ts
import * as React from 'react'
import * as t from 'io-ts'
import { props } from 'prop-types-ts'
// define the runtime types
const AlertType = t.keyof(
{
success: true,
warning: true,
info: true
},
'AlertType'
)
const RuntimeProps = t.interface(
{
type: AlertType
},
'Props'
)
// extract the static type
export type Props = t.TypeOf
// same as type Props = { type: 'success' | 'warning' | 'info' }
@props(RuntimeProps)
export default class Alert extends React.Component {
render() {
return
{this.props.children}
}
}
```
# Without decorators
```ts
import { getPropTypes } from 'prop-types-ts'
...
export default class Alert extends React.Component {
static propTypes = getPropTypes(RuntimeProps)
render() {
return
{this.props.children}
}
}
```
# Errors on console
```ts
// => Invalid value "foo" supplied to : Props/type: AlertType
```
```ts
// => 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`
```ts
@props(RuntimeProps, { strict: false })
export default class Alert extends React.Component {
...
}
```
# Pre-defined types
`prop-types-ts` exports some useful pre-defined types:
- `ReactElement`
- `ReactChild`
- `ReactFragment`
- `ReactNode`
# Type checking `children`
Use the `children` option
```ts
@props(RuntimeProps, { children: t.string })
export default class Alert extends React.Component {
...
}
{1} // => Invalid value 1 supplied to children: string
hello // no errors
```
You can use any [io-ts](https://github.com/gcanti/io-ts) type
```ts
import { props, ReactChild } from 'prop-types-ts'
@props(RuntimeProps, { children: t.tuple([t.string, ReactChild]) })
export default class Alert extends React.Component {
...
}
hello // => Invalid value "hello" supplied to children: [string, ReactChild]
hello world // no errors
```
works for `Component`s too
```ts
import * as t from 'io-ts'
import { props, ReactElement } from 'prop-types-ts'
const JSXButton = t.refinement(ReactElement, e => e.type === 'button', 'JSXButton')
@props(RuntimeProps, { children: JSXButton })
export default class Alert extends React.Component {
...
}
hello // => Invalid value "hello" supplied to children: JSXButton
Click me // no errors
```
# TypeScript compatibility
| `prop-type-ts` version | required `typescript` version |
| ---------------------- | ----------------------------- |
| 0.7.x+ | 3.5+ |
| 0.6.x+ | 3.2+ |