react-custom-props

    1.0.0-beta • Public • Published

    ReactCustomProps

    Custom configurable props for React components / elements.

    Add custom configurable props or HTML attributes to React components / elements, or any HTML elements.

    NPM Package Stats

    NPM Version Dependencies Dev Dependencies

    Build Status Coverage Status

    Install

    Instal via npm: npm install --save react-custom-props

    View the JSbin demo

    Use case: Add custom props to elements

    Say we have a customizable HelloWorld component which has:

    • a required name props
    • an optional custom props
    • an optional customOptions props

    Use with custom props values

    const custom = {
      // optional custom props can be a value
      className: 'hello-world'
    }
    const node = (
      <HelloWorld name="foo" custom={custom} />
    );

    Or if you prefer (further examples will use this notation):

    const props = { name: 'foo', custom: {
      className: 'hello-world'
    }};
    const node = (
      <HelloWorld {...props} />
    );

    Use with custom props functions

    Hanlders are not evaluated by default (props name matches /^on\w/ RegExp).

    const custom = { custom: {
      // optional custom props can be a function
      className: (...args) => ('hello-world'),
     
      // handlers /^on\w/ are not evaluated by default
      onClick: (ev) => {
        ev.preventDefault(); return false;
      }
    }};

    Use with custom.children array (indexed child)

    const custom = { custom: {
      // optional children custom props can be an array
      children: [
        // will be applied to the first child
        {
          style: {backgroundColor: 'yellow'}
        }
      ]
    }};

    Use with custom.children object (named child)

    const custom = { custom: {
      // optional children custom props can be an object
      children: {
        // will be applied to the 'span' child
        span: {
          style: {backgroundColor: 'yellow'}
        }
      }
    }};

    Use with customOptions props

    Available customOptions are:

    • ignore: A matcher to ignore some props. The matched props are ignored in the resulting custom props. Default is null.
    • raw: A matcher to copy as is some props. The matched props are copied as is in the resulting custom props. Default is /^on\w/, so that handlers are not evaluated.
    • bind: A value for this in the evaluated custom props function. Default is null

    A matcher can be either:

    • a value: The custom props name matches if it equals the value.
    • null or undefined (void): The custom props name never matches.
    • a RegExp: The custom props name matches if it the RegExp test success (i.e. /^foo/.test(name) w/ name = 'foo' is a success).
    • a Function: The custom props name matches if the function returns a truthly value.
    • an Array of the previous matcher types: The custom props name matches if it matches every matchers.
    import custom from 'react-custom-props';
     
    const props = {
      custom: {
        shouldBeIgnored: 'value', // should be ignored
        ignoreThisOneToo: 'value', // ignored too
        onClick: (ev) => (false), // handlers are raw
        rawValue: 'rawValue', //
        rawFunc: () => ('rawFunc')
        propValue: 'propValue',
        propFunc: () => ('propFunc'), // should be evaluated to 'propFunc'
        prop: (value) => (value) // should be evaluated to the passed in value
      },
      customOptions: {
        ignore: ['shouldBeIgnored', /^ignore/],
        raw: [/^on\w/, (name) => (name.substr(0, 3) === 'raw')]
        // let `bind` be the default (null)
      }
    };
    const customProps = custom(props)('argument');
    console.log(customProps);
    /*
    {
      onClick: (ev) => (false),
      rawValue: 'rawValue',
      rawFunc: () => ('rawFunc'),
      propValue: 'propValue',
      propFunc: 'propFunc',
      prop: 'argument'
    }
    */

    Use case: Design a fully configurable component

    With stateless function

    Custom props are evaluated with props in the following example.

    import React, {PropTypes} from 'react';
    import custom, {addPropTypesCustom} from 'react-custom-props';
     
    export default function HelloWorld(props) {
      return (
        // inject optional root props
        <h1 {...custom(props)(props)}>
          Hello
          // inject optional named child props
          <span {...custom(props, 'span')(props)}>
            {props.name}
          </span> !
        </h1>
      );
    }
     
    HelloWorld.propTypes = {
      name: PropTypes.string.isRequired,
    };
     
    // add PropTypes Custom (not required)
    addPropTypesCustom(HelloWorld);

    With React Component class

    Custom props are evaluated with this.props and this.state in the following example.

    import React, {PropTypes, Component} from 'react';
    import custom, {addPropTypesCustom} from 'react-custom-props';
     
    class HelloWorld extends Component {
      render() {
        return (
          // inject optional root props
          <h1 {...custom(this.props)(this.props, this.state)}>
            Hello
            // inject optional named child props
            <span {...custom(this.props, 'span')(this.props, this.state)}>
              {props.name}
            </span> !
          </h1>
        );
      }
    }
     
    HelloWorld.propTypes = {
      name: PropTypes.string.isRequired
    };
     
    // add PropTypes Custom (not required)
    addPropTypesCustom(HelloWorld);

    Install

    npm i react-custom-props

    DownloadsWeekly Downloads

    9

    Version

    1.0.0-beta

    License

    MIT

    Last publish

    Collaborators

    • sdt