Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-schema

Package Overview
Dependencies
0
Maintainers
1
Versions
13
Issues
File Explorer

Advanced tools

react-schema

Use react like PropTypes for generic object validation.

    2.0.0latest

Version published
Maintainers
1
Yearly downloads
15,025
decreased by-60.27%

Weekly downloads

Changelog

Source

[2.0.0] - 2016-10-27

Changed

  • Dropped dependency on React (thanks to @eliot-akira).

Readme

Source

react-schema

Build Status

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"; // An API schema. const mySchema = { isEnabled: PropTypes.bool.isRequired, width: PropTypes.numberOrString, }; const myData = { isEnabled: true, width: "10px" }; // Validate an object against the API. schema.validate(mySchema, myData); // returns: { isValid: true }

Introspection

You can introspect details about each type:

import { PropTypes } from "react-schema"; const myObject = PropTypes.shape({ isEnabled: PropTypes.bool }); myObject.$meta.type; // Equals: "shape" myObject.$meta.args; // Equals: { isEnabled: PropTypes.bool } const myEnum = PropTypes.oneOf(['one', 'two']); myEnum.$meta.type; // Equals: "oneOf" myEnum.$meta.args; // Equals: ['one', 'two']

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() { // ... }; // First, we create an introspectable instance of it: const MyIntrospectableCustomPropType = createIntrospectableChecker(MyCustomPropType); // Now, we register it as a PropType: PropTypes.MyCustomPropType = MyIntrospectableCustomPropType;

Here's how to register an analyzer for a certain propType:

const PropTypeAnalyzer = require('react-schema/lib/PropTypeAnalyzer'); // @args will be whatever the propType checker was instantiated with PropTypeAnalyzer.defineAnalyzer('MyCustomPropType', function(args) { return { type: 'whatever', fields: args.map(function(arg) { return { type: 'literal', value: arg }; }) } }); // Later on in your consumer code: const schema = { someProp: PropTypes.MyCustomPropType(['foo']) }; console.log(PropTypeAnalyzer.generateAST(schema)); // => { type: 'whatever', fields: [{ type: 'literal', value: 'foo' }]}

And here's how to register a custom formatter:

const PropTypeFormatter = require('react-schema/lib/PropTypeFormatter'); // @args will be whatever the propType checker was instantiated with PropTypeFormatter.defineFormatter('MyCustomPropType', function(args) { return `MyCustomProp: [${args.join(', ')}]`; }); // Later on in your consumer code: const schema = PropTypes.MyCustomPropType(['foo']); console.log(PropTypeFormatter.format(schema)); // => "MyCustomProp: [foo]"

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); // => "oneOf(one, two)"

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

Keywords

FAQs

What is react-schema?

Use react like PropTypes for generic object validation.

Is react-schema popular?

The npm package react-schema receives a total of 172 weekly downloads. As such, react-schema popularity was classified as not popular.

Is react-schema well maintained?

We found that react-schema demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 27 Oct 2016
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc