# prop-types-ts

> Alternative syntax for prop types providing both static and runtime type safety, powered by io-ts

Latest version **0.7.4** (published 2020-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install prop-types-ts
pnpm add prop-types-ts
yarn add prop-types-ts
bun add prop-types-ts
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.4 |
| Published | 2020-02-05 |
| First published | 2017-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 29.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 175 |
| Author | Giulio Canti |
| Maintainers | gcanti |
| Keywords | typescript, react, prop-types, io-ts |

## Links

- npm: https://www.npmjs.com/package/prop-types-ts
- Repository: https://github.com/gcanti/prop-types-ts
- Issues: https://github.com/gcanti/prop-types-ts/issues
- npm.io page: https://npm.io/package/prop-types-ts

## Dependencies (2)

- [fp-ts](https://npm.io/package/fp-ts.md) ^2.0.0
- [io-ts](https://npm.io/package/io-ts.md) ^2.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.7.4 (latest) — 2020-02-05
- 0.7.3 — 2020-01-10
- 0.7.2 — 2020-01-10
- 0.7.1 — 2020-01-10
- 0.7.0 — 2020-01-07
- 0.6.2 — 2019-01-03
- 0.6.1 — 2018-09-25
- 0.6.0 — 2018-02-15
- 0.5.1 — 2017-12-08
- 0.5.0 — 2017-12-04
- 0.4.0 — 2017-09-05
- 0.3.0 — 2017-07-14
- 0.2.0 — 2017-03-31
- 0.1.0 — 2017-03-13
- 0.0.2 — 2017-02-18
- … 1 more at https://npm.io/package/prop-types-ts/versions

## 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<typeof RuntimeProps>
// same as type Props = { type: 'success' | 'warning' | 'info' }

@props(RuntimeProps)
export default class Alert extends React.Component<Props, void> {
  render() {
    return <div>{this.props.children}</div>
  }
}
```

# Without decorators

```ts
import { getPropTypes } from 'prop-types-ts'

...

export default class Alert extends React.Component<Props, void> {
  static propTypes = getPropTypes(RuntimeProps)
  render() {
    return <div>{this.props.children}</div>
  }
}
```

# Errors on console

```ts
<Alert type="foo" /> // => Invalid value "foo" supplied to : Props/type: AlertType
```

```ts
<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`

```ts
@props(RuntimeProps, { strict: false })
export default class Alert extends React.Component<Props, void> {
  ...
}
```

# 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<Props, void> {
  ...
}

<Alert type="info">{1}</Alert> // => Invalid value 1 supplied to children: string
<Alert type="info">hello</Alert> // 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<Props, void> {
  ...
}

<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

```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<Props, void> {
  ...
}

<Alert type="info">hello</Alert> // => Invalid value "hello" supplied to children: JSXButton
<Alert type="info"><button>Click me</button></Alert> // no errors
```

# TypeScript compatibility

| `prop-type-ts` version | required `typescript` version |
| ---------------------- | ----------------------------- |
| 0.7.x+                 | 3.5+                          |
| 0.6.x+                 | 3.2+                          |

---
_Source: https://npm.io/package/prop-types-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._