source: node_modules/react-immutable-proptypes/README.md

main
Last change on this file was d24f17c, checked in by Aleksandar Panovski <apano77@…>, 15 months ago

Initial commit

  • Property mode set to 100644
File size: 5.6 KB
Line 
1# react-immutable-proptypes
2
3[![npm package](https://img.shields.io/npm/v/react-immutable-proptypes.svg?style=flat)](https://www.npmjs.org/package/react-immutable-proptypes) [![Code Climate](https://codeclimate.com/github/HurricaneJames/react-immutable-proptypes/badges/gpa.svg)](https://codeclimate.com/github/HurricaneJames/react-immutable-proptypes) [![Test Coverage](https://codeclimate.com/github/HurricaneJames/react-immutable-proptypes/badges/coverage.svg)](https://codeclimate.com/github/HurricaneJames/react-immutable-proptypes)
4
5PropType validators that work with Immutable.js.
6
7## About
8
9I got tired of seeing `React.PropTypes.instanceOf(Immutable.List)` or `React.PropTypes.instanceOf(Immutable.Map)` as PropTypes for components that should be specifying an `Immutable.List` **_of_** something or that an `Immutable.Map` **contains** some keys. A little *"googling"* came up empty, unless you want to use Flow, which I do not. So, I wrote `react-immutable-proptypes`.
10
11Usage is simple, they work with and like any `React.PropType.*` validator.
12
13```js
14var ImmutablePropTypes = require('react-immutable-proptypes');
15var MyReactComponent = React.createClass({
16 // ...
17 propTypes: {
18 myRequiredImmutableList: ImmutablePropTypes.listOf(
19 ImmutablePropTypes.contains({
20 someNumberProp: React.PropTypes.number.isRequired
21 })
22 ).isRequired
23 }
24 // ...
25});
26```
27
28Since version 0.1.7 there are convenience helpers for "primitive" Immutable.js objects.
29
30```js
31propTypes: {
32 oldListTypeChecker: React.PropTypes.instanceOf(Immutable.List),
33 anotherWay: ImmutablePropTypes.list,
34 requiredList: ImmutablePropTypes.list.isRequired,
35 mapsToo: ImmutablePropTypes.map,
36 evenIterable: ImmutablePropTypes.iterable
37}
38```
39
40
41## Installation
42
43Installing via [npmjs](https://www.npmjs.com/package/react-immutable-proptypes)
44```bash
45npm install --save react-immutable-proptypes
46```
47
48
49## API
50
51React-Immutable-PropTypes has:
52* Primitive Types
53```js
54ImmutablePropTypes.list // Immutable.List.isList
55ImmutablePropTypes.map // Immutable.Map.isMap
56ImmutablePropTypes.orderedMap // Immutable.OrderedMap.isOrderedMap
57ImmutablePropTypes.set // Immutable.Set.isSet
58ImmutablePropTypes.orderedSet // Immutable.OrderedSet.isOrderedSet
59ImmutablePropTypes.stack // Immutable.Stack.isStack
60ImmutablePropTypes.seq // Immutable.Seq.isSeq
61ImmutablePropTypes.iterable // Immutable.Iterable.isIterable
62ImmutablePropTypes.record // instanceof Record
63ImmutablePropTypes.contains // Immutable.Iterable.isIterable - contains(shape)
64ImmutablePropTypes.mapContains // Immutable.Map.isMap - contains(shape)
65```
66
67* `ImmutablePropTypes.contains` (formerly `shape`) is based on `React.PropTypes.shape` and will try to work with any `Immutable.Iterable`. In my usage it is the most used validator, as I'm often trying to validate that a map has certain properties with certain values.
68
69```es6
70// ...
71aMap: ImmutablePropTypes.contains({
72 aList: ImmutablePropTypes.contains({
73 0: React.PropTypes.number,
74 1: React.PropTypes.string,
75 2: React.PropTypes.number.isRequired,
76 }).isRequired,
77})
78// ...
79<SomeComponent aList={Immutable.fromJS({aList: [1, 'two', 3]})} />
80```
81
82* `ImmutablePropTypes.listOf` is based on `React.PropTypes.array` and is specific to `Immutable.List`.
83
84* `ImmutablePropTypes.mapOf` allows you to control both map values and keys (in Immutable.Map, keys could be _anything_ including another Immutable collections). It accepts two arguments - first one for values, second one for keys (optional). If you are interested in validation of keys only, just pass `React.PropTypes.any` as the first argument.
85
86```es6
87// ...
88aMap: ImmutablePropTypes.mapOf(
89 React.PropTypes.any, // validation for values
90 ImmutablePropTypes.mapContains({ // validation for keys
91 a: React.PropTypes.number.isRequired,
92 b: React.PropTypes.string
93 })
94)
95// ...
96const aMap = Immutable.Map([
97 [Immutable.Map({a: 1, b: '2'}), 'foo'],
98 [Immutable.Map({a: 3}), [1, '2', 3]]
99]);
100<SomeComponent aMap={aMap} />
101```
102
103* `ImmutablePropTypes.orderedMapOf` is basically the same as `mapOf`, but it is specific to `Immutable.OrderedMap`.
104
105* `ImmutablePropTypes.orderedSetOf` is basically the same as `listOf`, but it is specific to `Immutable.OrderedSet`.
106
107* `ImmutablePropTypes.stackOf` is basically the same as `listOf`, but it is specific to `Immutable.Stack`.
108
109* `ImmutablePropTypes.iterableOf` is the generic form of listOf/mapOf. It is useful when there is no need to validate anything other than Immutable.js compatible (ie. `Immutable.Iterable`). Continue to use `listOf` and/or `mapOf` when you know the type.
110
111* `ImmutablePropTypes.recordOf` is like `contains`, except it operates on Record properties.
112
113```js
114// ...
115aRecord: ImmutablePropTypes.recordOf({
116 keyA: React.PropTypes.string,
117 keyB: ImmutablePropTypes.list.isRequired
118})
119// ...
120```
121
122* `ImmutablePropTypes.mapContains` is based on `React.PropTypes.shape` and will only work with `Immutable.Map`.
123
124```es6
125// ...
126aMap: ImmutablePropTypes.mapContains({
127 aList: ImmutablePropTypes.list.isRequired,
128})
129// ...
130<SomeComponent aList={Immutable.fromJS({aList: [1, 2]})} />
131```
132
133These two validators cover the output of `Immutable.fromJS` on standard JSON data sources.
134
135## RFC
136
137Please send a message or, better yet, create an issue/pull request if you know a better solution, find bugs, or want a feature. For example, should `listOf` work with `Immutable.Seq` or `Immutable.Range`. I can think of reasons it should, but it is not a use case I have at the present, so I'm less than inclined to implement it. Alternatively, we could add a validator for sequences and/or ranges.
Note: See TracBrowser for help on using the repository browser.