Package Exports

tcomb-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tcomb-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm downloads

Features

builds on tcomb library
additional fine grained type checks, nestable at arbitrary level
by default props are required, a saner default since it's quite easy to forget .isRequired
checks for unwanted additional props

ES7 decorator

import { props, t } from 'tcomb-react';

const Gender = t.enums.of(['Male', 'Female'], 'Gender');
const URL = t.subtype(t.String, s => s.startsWith('http'), 'URL');

@props({
  name: t.String,
  surname: t.maybe(t.String),
  age: t.Number,
  gender: Gender,
  avatar: URL
})
class Card extends React.Component {

  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        ...
      </div>
    );
  }

}

Note. @props can accepts a subtype of a struct (see The subtype combinator).

@props(t.subtype(t.struct({
  name: t.String,
  ...
}), () => { ... }))

Unwanted additional props

By default tcomb-react checks unwanted additional props:

@props({
  name: t.String
})
class Person extends React.Component {

  render() {
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
    );
  }

}

...

<Person name="Giulio" surname="Canti" />

ouput to console:

Warning: Failed propType: [tcomb] Invalid additional prop(s):

[
  "surname"
]

supplied to Person.

You can opt-out passing an additional argument { strict: false }:

@props({
  name: t.String
}, { strict: false })
class Person extends React.Component {

  render() {
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
    );
  }

}

ES5

var t = require('tcomb-react').t;
var propTypes = require('tcomb-react').propTypes;

var Gender = t.enums.of(['Male', 'Female'], 'Gender');
var URL = t.subtype(t.String, function (s) { return s.startsWith('http'); }, 'URL');

var Card = React.createClass({

  propTypes: propTypes({
    name: t.String,
    surname: t.maybe(t.String),
    age: t.Number,
    gender: Gender,
    avatar: URL
  }),

  render: function () {
    return (
      <div>
        <p>{this.props.name}</p>
        ...
      </div>
    );
  }

});

Augmented pre-defined types

t.ReactElement
t.ReactNode
t.ReactChild
t.ReactChildren

import { props, t } from 'tcomb-react';

@props({
  children: t.ReactChild // allow only one child
})
class MyComponent extends React.Component {

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }

}

Comparison table

Type	React	tcomb-react
array	array	Array
boolean	bool	Boolean
functions	func	Function
numbers	number	Number
objects	object	Object
strings	string	String
all	any	Any
required prop	T.isRequired	T
optional prop	T	maybe(T)
custom types	✘	✓
tuples	✘	tuple([T, U, ...])
lists	arrayOf(T)	list(T)
instance	instanceOf(A)	T
dictionaries	objectOf(T)	dict(T, U) (keys are checked)
enums	oneOf(['a', 'b'])	enums.of('a b')
unions	oneOfType([T, U])	union([T, U])
duck typing	shape	struct
react element	element	ReactElement
react node	node	ReactNode
react child	✘	ReactChild
react children	✘	ReactChildren