react-skin
Create skinnable React components with minimal boilerplate!
Example
import React Component PropTypes from 'react';import ReactDOM from 'react-dom';import classNames from 'classnames'; import createSkinnableComponent createSkinComponent createSkin from 'react-skin'; const Button = ; const BootstrapSkin = ; ReactDOM;
API
createSkinnableComponent
: Class<ReactComponent>
Creates a Component class that renders a component from context (specifically, this.context[componentName + 'Skin']
.
For example, createSkinnableComponent('Button')
will render an element of type this.context.ButtonSkin
.
componentName
is used as the created class' displayName
.
createSkinComponent
: Class<ReactComponent>
Convention method that creates a Component class that provides the skin for a skinnable component. For instance with
Bootstrap you would just specify the component
type and className
.
displayName
is used as the created class' displayName
.
props
specifies additional props for the element returned by the render
method.
If props
contains a component
prop, the render
method will create an element of that type.
If props
contains a className
prop, it will be merged with any className
provided to the element
using classnames
.
createSkin
: Class<ReactComponent>
Creates a Component class that puts the given skinComponents
onto the child context (with 'Skin'
appended to their
keys).
For example,
;
will inject a ButtonSkin
into its child context to skin components of type createSkinnableComponent('Button')
.
displayName
is used as the created class' displayName
.
props
specifies additional props for the element returned by the render
method.
If props
contains a component
prop, the render
method will create an element of that type.
If props
contains a className
prop, it will be merged with any className
provided to the element
using classnames
.
createSkinDecorator
: any
Creates a Component that decorates skin components (via context injection).
For example,
let SkinDecorator = ;
will inject a TitleSkin
into its child context that adds an "Up" link to any <Title>
rendered by the child. The Title
argument to the lambda is the TitleSkin
from the decorator's own context.
Advanced Example
This example shows how skins can be nested to make Header, Title, Body, and Footer elements that respond differently inside of a Panel or a Modal. Be creative!
import React Component PropTypes from 'react';import ReactDOM from 'react-dom';import classNames from 'classnames'; import createSkinnableComponent createSkinComponent createSkin from 'react-skin'; const Button = ; const Panel = ;const Modal = ; const Header = ;const Title = ;const Body = ;const Footer = ; const BootstrapSkin = ; ReactDOM;