Validates style objects by ensuring the keys are valid css property names (in camelcase form).
Clone or download
Latest commit 4242d29 Sep 1, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data updates generated styles Feb 7, 2018
scripts updates generated styles Feb 7, 2018
src updates generated styles Feb 7, 2018
test adds flow type Oct 21, 2017
.flowconfig adds flow type Oct 21, 2017
.gitignore initial commit Mar 31, 2016
.npmignore Add test folder to npmignore to prevent it from being bundled in release Mar 8, 2018
LICENSE Add a full license text Aug 31, 2018
README.md adds flow type Oct 21, 2017
package.json 3.2.2 Aug 31, 2018
yarn.lock adds flow type Oct 21, 2017

README.md

Validates style objects by ensuring the keys are valid css property names (in camelcase form).

var stylePropType = require('react-style-proptype');

var Comp = React.createClass({
  propTypes: {
    myStyle: stylePropType,
  },
  render(){ ... }
});

You can use stylePropType.isRequired similar to the built in proptypes.

Flow

We also expose a flow type definition. It doesn't use an 'exact' type definition due to a bug in flow, so it'll allow invalid properties. The main purpose of this type is to improve the editor experience for custom components that accept a style prop.

import { type Style } from 'react-style-proptype/src/Style.flow.js';

type Props = {
  style: Style,
};

Arrays

With react-native styles can be passed an array of objects. You can use this variant with stylePropTypes.supportingArrays.

Removing in production

While prop-types aren't executed in production, they still take up bundle size. This is true of both the official prop-types package and react-style-proptype.

babel-plugin-transform-react-remove-prop-types can be used to completely remove prop-types, including the one from react-style-proptype.

Example .babelrc

{
  "presets": ["env", "react"],
  "plugins": [
    [
      "transform-react-remove-prop-types",
      {
        "removeImport": true,
        "additionalLibraries": ["react-style-proptype"]
      }
    ]
  ]
}