npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-schema

v2.0.0

Published

Use react like PropTypes for generic object validation.

Downloads

622

Readme

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