https://github.com/mathieuancelin/react-state-validator

A simple API to validate your React components state as it changes in time
https://github.com/mathieuancelin/react-state-validator

Last synced: 3 days ago
JSON representation

A simple API to validate your React components state as it changes in time

• Host: GitHub
• URL: https://github.com/mathieuancelin/react-state-validator
• Owner: mathieuancelin
• Created: 2016-01-25T14:51:25.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-09-04T08:33:02.000Z (about 8 years ago)
• Last Synced: 2024-04-23T23:03:26.959Z (7 months ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# react-state-validator

[![build status][1]][2]

A simple API to validate your React components state as it changes in time

```

npm install react-state-validator

```

or

```html

```

## Validate your state

Sometimes it can be helpful to validate your component state when in dev mode, even if you should be sure of what kind of data are merged to the state.

With `react-state-validator` you can reuse the React validation API for props to validate your state. You just have to defined a `stateTypes` property on your component, and pass the component into an enhancer. You can use the `enhanceWithValidState` API to create an Higher Order Component that can work with `React.Component` or `React.createClass` as the following code.

**WARNING**

As the validation is only performed in dev mode (for performance reason), in dev mode you should define a `process.env.NODE_ENV` variable with a value that is not `production` (ie. `test`, or `dev`). In production mode, set the same variable to `production`.

Also you have to be aware that `react-state-validator` can have serious impact on performances if you change your state a lot and if your state is big with a lot of validation. You should use it with caution and only for development.

```javascript

import React from 'react';

import { enhanceWithValidState } from 'react-state-validator';

export const HellWorld = enhanceWithValidState(React.createClass({

  getInitialState() {

    return {

      name: 'World',

    };

  },

  stateTypes: {

    name: React.PropTypes.string.isRequired,

  },

  render() {

    return (

      
Hello {this.state.name}!

    );

  }

}));

```


or

```javascript

import React from 'react';

import { enhanceWithValidState } from 'react-state-validator';

class HellWorld extends React.Component {

  constructor(props) {

    super(props);

    this.state = { name: 'World' };

  }

  render() {

    return (

      
Hello {this.state.name}!

    );

  }

}


HellWorld.stateTypes = {

  name: React.PropTypes.string.isRequired,

};

export default enhanceWithValidState(HellWorld);

```

Each time you state doesn't comply to validation constraints in dev mode, a error will be logged in your console.

[1]: https://api.travis-ci.org/mathieuancelin/react-state-validator.svg

[2]: https://api.travis-ci.org/mathieuancelin/react-state-validator