README
React Mixout - Forward Method
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.