React Mixout - Forward Context
For a full description of what this is please refer to the main README file of this project.
This mixout will provide an easy way to forward values from context as props. It also allows you to transform, rename and validate the value before it's passed down.
Installation
You can install this package with the following command:
npm install react-mixout-forward-context
Examples
Simple
For most cases only a name is enough, it will handle all implementation details necessary to make it happen.
;;; const Component = <span style=color: propsthemetextColor>Hello</span>; Component;
Validator
You can provide custom validator. forwardContext
uses React.PropTypes.any
by default
for the provided name.
;;; const Component = <span style=color: propsthemetextColor>Hello</span>; Component;
Rename
If there are name conflicts with other props passed down from parent components you can rename the key on the props passed down to the wrapped component.
;;; const Component = <span style=color: propsglobalThemetextColor>Hello</span>; Component;
Default Value
It's also possible to choose a default value if the context doesn't provide the required value.
There are two ways to provide a default. a simple value or a value generator. Sometimes you may need to build the value from the props passed down from parent component. The generator helps you do that.
;;; const Component = <span style=color: propsthemetextColor>Hello</span>; const defaultTheme = textColor: '#212121' ; Component;
Or using generator:
;;; const Component = <span style=color: propsthemetextColor>Hello</span>; const defaultThemeGenerator = textColor: propscolor || '#212121' ; Component;
Transformation
In some cases you might need to transform the context before passing it down. It's best used to provide backward compatibility by library authors.
;;; const Component = <span style=color: propstextColor>Hello</span>; const mapToProp = themetextColor; Component;
API Reference
forwardContext
Gets value from context and passes it down as props.
=> Injector;
name
: The name of the key on context to be passed down. It's also used to name the passed property if an alias is not provided as option.options
: The optional settings you can provide to manipulate its behavior:
interface ForwardContextOptions<T> alias?: string; validator?: ReactValidator<T>; defaultValue?: T; defaultGenerator?: T; mapToProp?: any;
alias
: Used to name the property passed down.validator
: Context validator function.defaultValue
: The default value to use if the context is not available.defaultGenerator
: Default value generator function, this takes precedence overdefaultValue
if both are provided.mapToProp
: Transforms the value taken from context before passing it down as property.
Typings
The typescript type definitions are also available and are installed via npm.
License
This project is licensed under the MIT license.