react-mixout-forward-method
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.7 • Public • Published

    React Mixout - Forward Method

    npm Build Status

    For a full description of what this is please refer to the main README file of this project.

    You can use this tiny mixout to forward method calls to the wrapped component. As they say, HOCs break imperative methods and libraries that depend on it. ReactTransitionGroup is of them, and since it's very common we also provide a mixout solely for that lib called forwardReactTransitionGroupMethods.

    Installation

    You can install this package with the following command:

    npm install react-mixout-forward-method

    Examples

    Simple

    You can simply forward a method using forwardMethod.

    import React from 'react';
    import mixout from 'react-mixout';
    import forwardMethod from 'react-mixout-forward-method';
     
    class MyComponent extends React.Component {
      foo(a, b) {
        return a + b;
      }
     
      render() {
        return null;
      }
    };
     
    // The resulting component will forward the call, passing all the arguments
    // and returning the returned value.
    export default mixout(forwardMethod('foo'))(Component);

    Rename

    You can also rename the method.

    import React from 'react';
    import mixout from 'react-mixout';
    import forwardMethod from 'react-mixout-forward-method';
     
    class MyComponent extends React.Component {
      foo(a, b) {
        return a + b;
      }
     
      render() {
        return null;
      }
    };
     
    // Does the same as previous example except that you will need to
    // call .bar(1, 2) on the instance instead of .foo(1, 2)
    export default mixout(forwardMethod('bar', 'foo'))(Component);

    Multiple functions

    Just use mixout's combine or pass in another forwardMethod:

    import React from 'react';
    import mixout from 'react-mixout';
    import forwardMethod from 'react-mixout-forward-method';
     
    // MyComponent
     
    export default mixout(
      forwardMethod('bar'),
      forwardMethod('baz', 'foo'),
      combine(forwardMethod('focus'), forwardMethod('blur'))
    )(Component);

    ReactTransitionGroup

    Import forwardReactTransitionGroupMethods and add it to the mix.

    import React from 'react';
    import mixout from 'react-mixout';
    import {forwardReactTransitionGroupMethods} from 'react-mixout-forward-method';
     
    // Implement componentWillAppear, etc...
    // MyAnimatedComponent
     
    export default mixout(forwardReactTransitionGroupMethods)(Component);

    API Reference

    forwardMethod

    function forwardMethod(name: string, targetName?: string): Injector;
    • name: The name of the function that is put on the mixout.
    • targetName: The name of the target function on the wrapped component. name is used if omitted.

    forwardReactTransitionGroupMethods

    const forwardReactTransitionGroupMethods: Injector;

    You can pass this directly to mixout out of box.

    Typings

    The typescript type definitions are also available and are installed via npm.

    License

    This project is licensed under the MIT license.

    Install

    npm i react-mixout-forward-method

    DownloadsWeekly Downloads

    0

    Version

    0.5.7

    License

    MIT

    Last publish

    Collaborators

    • alitaheri