Code Monkey home page Code Monkey logo

react-mori-proptypes's Introduction

react-mori-proptypes npm version npm Circle CI

PropType validators that work with Mori.js.

About

This package was inspired by react-immutable-proptypes, which I had used often. Striving to become more FRP, I have switched to using mori.js for my immutable needs. I could not find a similar package for validating propTypes with mori data structures, so created this package and used react-immutable-proptypes as a base.

Getting Started

Install

npm install react-mori-proptypes --save

Usage

Usage is simple, they work with and like any React.PropType.* validator.

import MoriPropTypes from 'react-mori-proptypes';
import { vector } from 'mori';

class MyComponent extends React.Component {

  static propTypes = {
    someMap: MoriPropTypes.map.isRequired,
    someVec: MoriPropTypes.vec,
  };

  static defaultProps = {
    someVec: vector(1, 2, 3, 4),
  };

  render() {
    ...
  }

}

API

React-Mori-PropTypes has:

Primitive Types

MoriPropTypes.list         // mori.isList
MoriPropTypes.map          // mori.isMap
MoriPropTypes.queue        // isQueue
MoriPropTypes.range        // isRange
MoriPropTypes.set          // mori.isSet
MoriPropTypes.sortedMap    // isSortedMap
MoriPropTypes.sortedSet    // isSortedSet
MoriPropTypes.vec          // mori.isVec

Collection Types

MoriPropTypes.listOf         // based on React.PropTypes.arrayOf
MoriPropTypes.mapOf          // similar to MoriPropTypes.vecOf, but specific to maps
MoriPropTypes.queueOf        // similar to MoriPropTypes.vecOf, but specific to queues
MoriPropTypes.setOf          // similar to MoriPropTypes.vecOf, but specific to sets
MoriPropTypes.sortedMap      // similar to MoriPropTypes.vecOf, but specific to sortedMaps
MoriPropTypes.sortedSet      // similar to MoriPropTypes.vecOf, but specific to sortedSets
MoriPropTypes.vecOf          // based on React.PropTypes.arrayOf

Contains Types

React-Mori-PropTypes also supports a contains type, which is analogous to React.PropTypes.shape type. This propType validator supports defining the shape of a hashMap, I.E. the keys/value types. You should only use a mori.map or mori.sortedMap with contains.

It is used the same way as shape:

static propTypes = {
  person: MoriPropTypes.contains({
    firstName: React.PropTypes.string.isRequired,
    lastName: React.PropTypes.string.isRequired,
    age: React.PropTypes.number,
  })
};

static defaultProps = {
  person: mori.hashMap('firstName', 'John', 'lastName', 'Smith')
}

Contributing

Issues, feedback, and PR's welcome. Please follow the linter rules.

react-mori-proptypes's People

Contributors

farism avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

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.