core/kind

kindFunction

kind(config)Function

Creates a new component with some helpful declarative syntactic sugar.

Example:

import css from './Button.less';
const Button = kind({
	// expect color and onClick properties but neither required
	propTypes: {
		color: PropTypes.string
	},
	// if no color is provided, it'll be green
	defaultProps: {
		color: 'green'
	},
	// expect backgroundColor via context
	contextTypes: {
		backgroundColor: PropTypes.string
	},
	// configure styles with the static className to merge with user className
	styles: {
		// include the CSS modules map so 'button' can be resolved to the local name
		css,
		className: 'button'
	},
	// add some computed properties
	computed: {
		// border color will be the color prepended by 'light'
		borderColor: ({color}) => 'light' + color,
		// background color will be the contextual background color if specified
		color: ({color}, context) => context.backgroundColor || color
	},
	// Render the thing, already!
	render: ({color, borderColor, children, ...rest}) => (
		<button
			{...rest}
			style={{backgroundColor: color, borderColor}}
		>
			{children}
		</button>
	)
});

1 Param

config Object

Component configuration

Returns

Function

Component