react-peek

1.1.1 • Public • Published

react-peek

Gather data by inspecting react components

A drop-in replacement for Facebook's prop-types with added properties on the resolver functions that store prop type data.

Install

npm i --save react-peek

Usage

Define propTypes for your component.

import PropTypes from 'react-peek/prop-types';
 
const propTypes = {
  className: PropTypes.string,
 
  size: PropTypes.oneOf(['large', 'small']).isRequired,
 
  onClick: PropTypes.func`
    Callback function triggered when user clicks on the button.
  `
};

then inspect the peek property to get info about a particular propType.

propTypes.className.peek.type; // 'string'
propTypes.size.peek.type; // 'oneOf'
propTypes.size.peek.isRequired; // true
propTypes.size.peek.args; // ['large', 'small']
propTypes.onClick.peek.type; // 'func'
propTypes.onClick.peek.text; // '\n    Callback function triggered when user clicks on the button.\n  '

Optimizing builds

Template strings can be removed in production builds by using the babel plugin react-peek/babel.

Example .babelrc:

{
    "env": {
        "test": {
            "plugins": []
        },
        "development": {
            "plugins": []
        },
        "production": {
            "plugins": [
                ["react-peek/babel"]
            ]
        }
    },
    "presets": [
        "stage-2",
        "es2015",
        "react"
    ]
}

This will replace this:

{
  className: PropTypes.string`
    Passes a custom className through to the component.
  `,
 
  size: PropTypes.oneOf(['large', 'small']).isRequired`
    Sets the size of the button.
  `,
 
  onClick: PropTypes.func`
    Callback function triggered when user clicks on the button.
  `
};

with this:

{
  className: PropTypes.string,
  size: PropTypes.oneOf(['large', 'small']).isRequired,
  onClick: PropTypes.func
};

Package Sidebar

Install

npm i react-peek

Weekly Downloads

6

Version

1.1.1

License

MIT

Unpacked Size

16.9 kB

Total Files

10

Last publish

Collaborators

  • ogupte
  • tsantef