1 | # react-immutable-proptypes
|
---|
2 |
|
---|
3 | [](https://www.npmjs.org/package/react-immutable-proptypes) [](https://codeclimate.com/github/HurricaneJames/react-immutable-proptypes) [](https://codeclimate.com/github/HurricaneJames/react-immutable-proptypes)
|
---|
4 |
|
---|
5 | PropType validators that work with Immutable.js.
|
---|
6 |
|
---|
7 | ## About
|
---|
8 |
|
---|
9 | I 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 |
|
---|
11 | Usage is simple, they work with and like any `React.PropType.*` validator.
|
---|
12 |
|
---|
13 | ```js
|
---|
14 | var ImmutablePropTypes = require('react-immutable-proptypes');
|
---|
15 | var 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 |
|
---|
28 | Since version 0.1.7 there are convenience helpers for "primitive" Immutable.js objects.
|
---|
29 |
|
---|
30 | ```js
|
---|
31 | propTypes: {
|
---|
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 |
|
---|
43 | Installing via [npmjs](https://www.npmjs.com/package/react-immutable-proptypes)
|
---|
44 | ```bash
|
---|
45 | npm install --save react-immutable-proptypes
|
---|
46 | ```
|
---|
47 |
|
---|
48 |
|
---|
49 | ## API
|
---|
50 |
|
---|
51 | React-Immutable-PropTypes has:
|
---|
52 | * Primitive Types
|
---|
53 | ```js
|
---|
54 | ImmutablePropTypes.list // Immutable.List.isList
|
---|
55 | ImmutablePropTypes.map // Immutable.Map.isMap
|
---|
56 | ImmutablePropTypes.orderedMap // Immutable.OrderedMap.isOrderedMap
|
---|
57 | ImmutablePropTypes.set // Immutable.Set.isSet
|
---|
58 | ImmutablePropTypes.orderedSet // Immutable.OrderedSet.isOrderedSet
|
---|
59 | ImmutablePropTypes.stack // Immutable.Stack.isStack
|
---|
60 | ImmutablePropTypes.seq // Immutable.Seq.isSeq
|
---|
61 | ImmutablePropTypes.iterable // Immutable.Iterable.isIterable
|
---|
62 | ImmutablePropTypes.record // instanceof Record
|
---|
63 | ImmutablePropTypes.contains // Immutable.Iterable.isIterable - contains(shape)
|
---|
64 | ImmutablePropTypes.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 | // ...
|
---|
71 | aMap: 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 | // ...
|
---|
88 | aMap: 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 | // ...
|
---|
96 | const 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 | // ...
|
---|
115 | aRecord: 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 | // ...
|
---|
126 | aMap: ImmutablePropTypes.mapContains({
|
---|
127 | aList: ImmutablePropTypes.list.isRequired,
|
---|
128 | })
|
---|
129 | // ...
|
---|
130 | <SomeComponent aList={Immutable.fromJS({aList: [1, 2]})} />
|
---|
131 | ```
|
---|
132 |
|
---|
133 | These two validators cover the output of `Immutable.fromJS` on standard JSON data sources.
|
---|
134 |
|
---|
135 | ## RFC
|
---|
136 |
|
---|
137 | Please 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.
|
---|