Higher order component to handle merging callbacks, prefixing classnames and props passthrough.
npm install react-baseA Higher-Order Component to add the essentials to your React component with a single line
- Callback management helpers
- Semantic class helpers
- Property passthrough helpers
React-base is a base class for your react components which is designed to make
your life easier.
When you extend Base('namespace') and add {...this.baseProps({classes})} to the root
of your rendered content, you get:
- A class added based on the provided namespace and the class name
- More classes added based on the passed in object, all namespaced with the
root class
- Any passed-in class name will be smartly merged with the above
- If you've tagged any callbacks with @Base.on, these will be smartly merged
with any callbacks passed via this.props
- Any props not specified in propTypes will be passed through
Inheriting from Base(namespace) will give you the following:
- this.baseClasses(...)
- this.c(...)
- @Base.on(...events)
- this.baseCallbacks
- this.baseProps({classes = {}, omitKnownPropTypes = true})
This is an example of typical usage. propTypes is defined using the proposed
static properties from ES7):
``
import React, {PropTypes} from 'react'
import Base from 'react-base'
class Selectable extends Base("ui") {
static propTypes = {
active: PropTypes.bool.isRequired,
onSelectItem: PropTypes.func.isRequired,
}
@Base.on('click')
select() {
this.props.onSelectItem(this.props.value)
}
render() {
return (