README
React Mixout
For a full description of what this is please refer to the main README file of this project.
Installation
You can install this package with the following command:
npm install react-mixout
API Reference
mixout
Analyzes and applies features to your component as an HOC.
// Returns a wrapper that can wrap your component and apply the
// desired features on it. Or you can pass in a remix to enable
// direct rendering.
function mixout(...injectors: Injector[]): Wrapper;
// Wrapper: Component => WrappedComponent;
// Wrapper: Remix => Component;
injectors
: The features or combination of features to apply to this component.
note: if you wish to know what these injectors look like take a look at the INJECTOR.md file.
Example
import mixout from 'react-mixout';
import pure from 'react-mixout-pure';
import forwardContext from 'react-mixout-forward-context';
const Component = props => /* Your everyday component*/ null;
export default mixout(pure, forwardContext('theme'))(Component);
combine
Combines multiple features into a pack of features for easier shipping. Please note that this function supports nested combinations, that means you can combine packs with other packs and features as you wish, but a cyclic combination (if at all possible) will probably hang your application.
// Returns the packed feature made up of the provided features
function combine(...injectors: Injector[]): Injector;
injectors
: The features to pack as one.
Example
// commonFeatures.js
import {combine} from 'react-mixout';
import pure from 'react-mixout-pure';
import forwardContext from 'react-mixout-forward-context';
export default combine(pure, forwardContext('theme'));
// Component.js
import mixout from 'react-mixout';
import commonFeatures from './commonFeatures';
const Component = props => /* Your everyday component*/ null;
export default mixout(commonFeatures)(Component);
remix
Builds a representation of what the render function on mixout will return. Useful for small wrapped components.
function remix<P>(renderer: RemixRenderer<P>): Remix<P>;
function remix<P>(displayName: string, renderer: RemixRenderer<P>): Remix<P>;
type RemixRenderer<P> = (props: P) => ReactElement;
renderer
: The renderer function that takes the passed props and returns a react element.
displayName
: The display name to use to override Mixout's default displayName
.
Example
import mixout, {remix} from 'react-mixout';
import pure from 'react-mixout-pure';
const Component = remix(props => /* Your everyday tiny component*/ null);
export default mixout(pure)(Component);
Typings
The typescript type definitions are also available and are installed via npm.
Thanks
Great thanks to material-ui team and specially @nathanmarks for providing valuable insight that made this possible.
License
This project is licensed under the MIT license.