Giter VIP home page Giter VIP logo

zan's Introduction

Zan

NPM version Build status Test coverage Downloads

Zan is a drop in replacement for React.PropTypes:

import { types } from 'zan';
React.createClass({
  propTypes: {
    name: types.string,
    age: types.number.isOptional
  },
  render() {/*...*/},
});

The primary differences between Zan and React.PropTypes are:

  1. Checks are isRequired by default and expose an isOptional property
  2. Provides an exactShape type checker
  3. Provides introspection methods
  4. Provides methods to help you create your own type checkers

API

zan.types

Exposes all the same type-checkers as React.PropTypes. Each type-checker is required by default and has the following properties:

  • isOptional - Returns an optional type checker. Optional checkers behave like React.PropType's default behavior.

  • inspectArgs() - Returns the arguments passed to the type-checker creator.

    Example: shape(o).inspectArgs() === o

  • inspectType() - Returns the checker type.

    Example: shape(o).inspectType() === shape.

  • inspectIsOptional() - Return whether or not the checker is optional

    Example: shape(o).inspectIsOptional() === false.

    Example: shape(o).isOptional.inspectIsOptional() === true.

zan.types.exactShape(shape)

Like shape(), but disallows unrecognized keys.

zan.check(type, value, [label])

Validates value against a type checker. Useful when using Zan outside of React components. Returns null if the data validates successfully or an Error object if there's an error:

Error: Invalid prop `value.field[0].subField` of type `object` supplied to `label`, expected an array.

Usage:

// Normal
const error = zan.check(type, value, 'label');
// Curried
const check = zan.check(type);
const error = check(value, 'label');

createCustomChecker(checkerFn)

Allows you to create your own type checker. Here's how you'd create a checker that validates that data is an instance of a RegExp:

const regex = zan.createCustomChecker((props, propName /*, ...*/) => {
  const value = props[propName];
  if (!(value instanceof RegExp)) {
    return new Error('Expected a regex but found "' + (typeof value) + '".');
  }
});
// regex gets all of Zan's built-in goodness:
regex.isOptional;
regex.inspectType() === regex;

The checker is passed all the same arguments as React PropType checkers: props, propName, componentName, location, and propFullName.

A Note on Error Formats

The final checker errors will be in one of two forms:

Required prop `field.subField[0].name` was not specified in `MyComponent`.
Invalid prop `field.subField[0].name` of (type `number` OR value `xyz`) supplied to `MyComponent`...

If you return an error that doesn't start with Required or Invalid then Zan prefixes the error message with:

Invalid prop `field.subField[0].name` of value `xyz` supplied to `MyComponent`:

createCustomCheckerCreator(checkerCreatorFn)

This is like createCustomChecker() but is for checkers that require arguments:

const range = zan.createCustomCheckerCreator((min, max) =>
  (props, propName/*, ...*/) => {
    const value = props[propName];
    if (value < min || value > max) {
      return new Error('Expected number in range `' + min + '` to `' + max + '`.');
    }
  }
);
// regex gets all of Zan's build-in goodness:
range(1, 3).isOptional;
range(1, 3).inspectType() === range;

recursive(types)

Converts native arrays and objects to arrayOf() and shape() calls, so you don't have to:

import { types, recursive } from 'zan';
const { number, string } = types;

const propTypes = recursive({
  myAge: number,
  myFavoriteNumbers: [number],
  treeNode: {
    value: number
  },
  buddies: [{
    name: string,
    age: number,
  }],
});

// ...is equivalent to:

const propTypes = {
  myAge: number,
  myFavoriteNumbers: arrayOf(number),
  treeNode: shape({
    value: number,
  }),
  buddies: arrayOf(shape({
    name: string,
    age: number,
  })),
};

see test.js from more usage

zan's People

Contributors

aldendaniels avatar kolodny avatar treyreynolds avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

zan's Issues

Bump Major Version

@kolodny - can you re-publish to NPM as 4.0.0. My last PR included breaking changes.

FYI in 883b76a I updated package.json. I meant to do this in a PR, but accidentally committed directly to master.

Suggestion: Rename exactShape to shape and shape to shapeIncludes

I'd written my own library doing the exact same thing as zan... then I found zan. Nice work!

The one difference is that my implementation made shape() require an exact match and added a shapeIncludes type. IMO this is nicer since I normally want an exact match and want to opt into a non-exact match.

Thoughts?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.