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

% tcomb-react

This library allows you to check all the props of your React components (the children too). If you pass a wrong prop to the component, it throws an error with a descriptive message.

Example: an internal link

Let's build a simple React component with a fancy spec, the component must have:

only a href prop and it must be a string starting with #
only one child and it must be a string

var Tcomb = require('tcomb-react');
var Str = Tcomb.Str;          // the string type
var subtype = Tcomb.subtype;  // build a subtype
var struct = Tcomb.struct;    // build a struct (i.e. a class)

// a predicate is a function with signature (x) -> boolean
var predicate = function (s) { return s.substring(0, 1) === '#'; };

// the `href` spec
var Href = subtype(Str, predicate);

// the props spec
var Props = struct({
  href: Href,
  children: Str
});

var Anchor = React.createClass({
  render: function () {
    // add this assert and you are done
    Tcomb.react.assertEqual(this, Props);
    return (
      <a href={this.props.href}>{this.props.children}</a>
    );
  }
});

here some results

// OK
React.renderComponent(
  <Anchor href="#section">title</Anchor>
, mountNode);

// KO, `unknown` attribute not specified
React.renderComponent(
  <Anchor href="#section" unknown="true">title</Anchor>
, mountNode);

// KO, href is missing
React.renderComponent(
  <Anchor>title</Anchor>
, mountNode);

// KO, content is missing
React.renderComponent(
  <Anchor href="#section"></Anchor>
, mountNode);

// KO, href is wrong
React.renderComponent(
  <Anchor href="http://mydomain.com">title</Anchor>
, mountNode);

// KO, content should be a string not a span
React.renderComponent(
  <Anchor href="#section"><span>title</span></Anchor>
, mountNode);

To try this example in your browser, download the code and open example/example.html. Remember to open up the console, you'll see the debugger in action.

Api

To find out all the controls and the types you can define see here.

Asserts

assertEqual(component, type, [opts])

component a React component
type a struct or a subtype of a struct

If you pass a wrog prop to the component the debugger kicks in so you can inspect the stack and quickly find out what's wrong, then it throws an error with a descriptive message.

opts.strict

If set to false, allows unspecified properties (default true).

Tcomb.react.assertEqual(this, Props, {strict: false});

...

// OK
React.renderComponent(
  <Anchor href="#section" unknown="true">title</Anchor>
, mountNode);

Bindings

bind(component, type, opts)

The arguments are the same of assertEqual. Returns a proxy component with asserts included.

Example

var UnsafeAlert = require('react-bootstrap/Alert');
var BsStyle = enums.of('info success warning danger', 'BsStyle');
var BsSize = enums.of('large medium small xsmall', 'BsSize');

// onDismiss and dismissAfter must either or neither passed
var eitherOrNeither = function (x) {
  return Nil.is(x.onDismiss) === Nil.is(x.dismissAfter);
};

var AlertProps = subtype(struct({
  __type__: enums.of('Alert'),
  bsStyle: maybe(BsStyle),
  bsSize: maybe(BsSize),
  onDismiss: maybe(Func),
  dismissAfter: maybe(Num),
  children: Any
}), eitherOrNeither, 'Alert');

var Alert = Tcomb.react.bind(UnsafeAlert, AlertProps);

// OK
React.renderComponent(
  <Alert bsStyle="warning">hey</Alert>
, mountNode);

// KO, worng `bsStyle`
React.renderComponent(
  <Alert bsStyle="unknown">hey</Alert>
, mountNode);

tcomb-react