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

0.5.7 • Public • Published

React Mixout

npm Build Status

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.

Readme

Keywords

Package Sidebar

Install

npm i react-mixout

Weekly Downloads

2

Version

0.5.7

License

MIT

Last publish

Collaborators

  • alitaheri