react-decorate-props v1.0.2

react-decorate-props

react-decorate-props is a higher-order component which can help you concat className, merge style and forward the rest of props. No moreconst {className, style, ...others} = this.props in render().

Usage

// Instead of...
class Foo extends React.Component {
  render() {
    const { className, style, ...others } = this.props;
    const rootClass = "root";
    const rootStyle = { color: "red", backgroundColor: "green" };
    return (
      <div
        className={[className, rootClass].join(" ")}
        style={Object.merge({}, rootStyle, style)}
        {...others}
      />
    );
  }
}

// ...wrap component with HOC...
import decorate from "react-decorate-props";
class Foo extends React.Component {
  render() {
    const rootClass = "root";
    const rootStyle = { color: "red", backgroundColor: "green" };
    return <div className={rootClass} style={rootStyle} />;
  }
}
export default decorate(Foo);

// ...and in the consuming module...
<Foo
  className="custom"
  style={{ backgroundColor: "black", fontSize: 24 }}
  data-bar="bar"
/>;

// ... HTML output:
// <div
//   class="root custom"
//   style="color:red;background-color:black;font-size:24px"
//   data-bar="bar"
// ></div>