Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
react-immutable-proptypes
Advanced tools
The react-immutable-proptypes package provides PropTypes validators that are specifically designed to work with Immutable.js data structures. This allows developers to enforce the types of Immutable.js collections in their React components, ensuring that the data passed through props adheres to the expected structure.
List
This feature allows you to validate that a prop is an Immutable.js List. The code sample demonstrates a React component that expects a prop named `myList` to be an Immutable List.
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { List } from 'immutable';
const MyComponent = ({ myList }) => (
<div>{myList.join(', ')}</div>
);
MyComponent.propTypes = {
myList: ImmutablePropTypes.list
};
export default MyComponent;
Map
This feature allows you to validate that a prop is an Immutable.js Map. The code sample demonstrates a React component that expects a prop named `myMap` to be an Immutable Map.
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map } from 'immutable';
const MyComponent = ({ myMap }) => (
<div>{myMap.get('key')}</div>
);
MyComponent.propTypes = {
myMap: ImmutablePropTypes.map
};
export default MyComponent;
OrderedMap
This feature allows you to validate that a prop is an Immutable.js OrderedMap. The code sample demonstrates a React component that expects a prop named `myOrderedMap` to be an Immutable OrderedMap.
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { OrderedMap } from 'immutable';
const MyComponent = ({ myOrderedMap }) => (
<div>{myOrderedMap.get('key')}</div>
);
MyComponent.propTypes = {
myOrderedMap: ImmutablePropTypes.orderedMap
};
export default MyComponent;
Set
This feature allows you to validate that a prop is an Immutable.js Set. The code sample demonstrates a React component that expects a prop named `mySet` to be an Immutable Set.
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Set } from 'immutable';
const MyComponent = ({ mySet }) => (
<div>{Array.from(mySet).join(', ')}</div>
);
MyComponent.propTypes = {
mySet: ImmutablePropTypes.set
};
export default MyComponent;
The prop-types package is the standard library for type-checking props in React components. While it does not provide specific validators for Immutable.js data structures, it is widely used for general prop type validation in React applications.
The immutable-prop-types package provides PropTypes validators for Immutable.js data structures, similar to react-immutable-proptypes. It offers a similar set of validators for Immutable.js collections, making it a direct alternative.
PropType validators that work with Immutable.js.
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
.
Usage is simple, they work with and like any React.PropType.*
validator.
var ImmutablePropTypes = require('react-immutable-proptypes');
var MyReactComponent = React.createClass({
// ...
propTypes: {
myRequiredImmutableList: ImmutablePropTypes.listOf(
ImmutablePropTypes.contains({
someNumberProp: React.PropTypes.number.isRequired
})
).isRequired
}
// ...
});
Since version 0.1.7 there are convenience helpers for "primitive" Immutable.js objects.
propTypes: {
oldListTypeChecker: React.PropTypes.instanceOf(Immutable.List),
anotherWay: ImmutablePropTypes.list,
requiredList: ImmutablePropTypes.list.isRequired,
mapsToo: ImmutablePropTypes.map,
evenIterable: ImmutablePropTypes.iterable
}
Installing via npmjs
npm install --save react-immutable-proptypes
React-Immutable-PropTypes has:
Primitive Types
ImmutablePropTypes.list // Immutable.List.isList
ImmutablePropTypes.map // Immutable.Map.isMap
ImmutablePropTypes.orderedMap // Immutable.OrderedMap.isOrderedMap
ImmutablePropTypes.set // Immutable.Set.isSet
ImmutablePropTypes.orderedSet // Immutable.OrderedSet.isOrderedSet
ImmutablePropTypes.stack // Immutable.Stack.isStack
ImmutablePropTypes.seq // Immutable.Seq.isSeq
ImmutablePropTypes.iterable // Immutable.Iterable.isIterable
ImmutablePropTypes.record // instanceof Record
ImmutablePropTypes.listOf
is based on React.PropTypes.array
and is specific to Immutable.List
.
ImmutablePropTypes.mapOf
is basically the same as listOf
, but it is specific to Immutable.Map
.
ImmutablePropTypes.orderedMapOf
is basically the same as listOf
, but it is specific to Immutable.OrderedMap
.
ImmutablePropTypes.orderedSetOf
is basically the same as listOf
, but it is specific to Immutable.OrderedSet
.
ImmutbalePropTypes.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.
ImmutablePropTypes.recordOf
is like contains
, except it operates on Record properties.
// ...
aRecord: ImmutablePropTypes.recordOf({
keyA: React.PropTypes.string,
keyB: ImmutablePropTypes.list.isRequired
})
// ...
ImmutablePropTypes.contains
(formerly shape
) is based on React.PropTypes.shape
and will try to work with any Immutable.Iterable
. In practice, I would recommend limiting this to Immutable.Map
or Immutable.OrderedMap
. However, it is possible to abuse contains
to validate an array via Immutable.List
.
// ...
aList: ImmutablePropTypes.contains({
0: React.PropTypes.number.isRequired,
1: React.PropTypes.string.isRequired,
2: React.PropTypes.string
})
// ...
<SomeComponent aList={Immutable.List([1, '2'])} />
That said, don't do this. Please, just... don't.
These two validators cover the output of Immutable.fromJS
on standard JSON data sources.
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.
1.5.0 improved warnings
object
.FAQs
PropType validators that work with Immutable.js.
The npm package react-immutable-proptypes receives a total of 342,623 weekly downloads. As such, react-immutable-proptypes popularity was classified as popular.
We found that react-immutable-proptypes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.