react-schema
Use react like PropTypes for generic object validation.
Note: Due to changes in React, PropTypes can no longer be accessed externally without
causing warnings. So, the dependency on React has been dropped allowing the same wonderful
schema functionality to be provided but without the ugly warnings (many thanks to @eliot-akira).
Concept
React provides an extraordinarily concise yet powerful way of defining component API's via PropTypes. This module:
- Makes it easy to re-use that system for generic validation of object structures decoupled from React UI components.
- Provides an introspectable version of the PropTypes.
Getting Started
npm install react-schema
Validation
Validate an object against an API definition:
import schema, { PropTypes } from "react-schema";
const mySchema = {
isEnabled: PropTypes.bool.isRequired,
width: PropTypes.numberOrString,
};
const myData = {
isEnabled: true,
width: "10px"
};
schema.validate(mySchema, myData);
Introspection
You can introspect details about each type:
import { PropTypes } from "react-schema";
const myObject = PropTypes.shape({ isEnabled: PropTypes.bool });
myObject.$meta.type;
myObject.$meta.args;
const myEnum = PropTypes.oneOf(['one', 'two']);
myEnum.$meta.type;
myEnum.$meta.args;
Defining your own custom PropTypes
If you need the introspection behavior on a custom type, you need to wrap it using createIntrospectableChecker
:
const { PropTypes } = require('react-schema');
const createIntrospectableChecker = require('react-schema/lib/utils/createIntrospectableChecker');
const MyCustomPropType = function() {
};
const MyIntrospectableCustomPropType = createIntrospectableChecker(MyCustomPropType);
PropTypes.MyCustomPropType = MyIntrospectableCustomPropType;
Here's how to register an analyzer for a certain propType:
const PropTypeAnalyzer = require('react-schema/lib/PropTypeAnalyzer');
PropTypeAnalyzer.defineAnalyzer('MyCustomPropType', function(args) {
return {
type: 'whatever',
fields: args.map(function(arg) {
return { type: 'literal', value: arg };
})
}
});
const schema = {
someProp: PropTypes.MyCustomPropType(['foo'])
};
console.log(PropTypeAnalyzer.generateAST(schema));
And here's how to register a custom formatter:
const PropTypeFormatter = require('react-schema/lib/PropTypeFormatter');
PropTypeFormatter.defineFormatter('MyCustomPropType', function(args) {
return `MyCustomProp: [${args.join(', ')}]`;
});
const schema = PropTypes.MyCustomPropType(['foo']);
console.log(PropTypeFormatter.format(schema));
toString
Property definitions created from the module wrapper provides expressive details about each type when converted to a string.
You can cast a PropType node to a descriptive string (provided it has a formatter defined) using the PropTypeFormatter
:
import { PropTypes } from "react-schema";
import { format } from "react-schema/lib/PropTypeFormatter";
const myEnum = PropTypes.oneOf(['one', 'two']);
format(myEnum);
Additional Types
The complement the base PropTypes, the following commonly used definitions are available:
PropType.numberOrString
PropType.boolOrString
Test
# Run tests.
npm test
# Watch and re-run tests.
npm run tdd
Contributors
License: MIT