https://github.com/tonytonyjan/react-decorate-props

react-decorate is a higher-order component which can help you concat className, merge style and forward the rest of props.
https://github.com/tonytonyjan/react-decorate-props

react reactjs

Last synced: about 2 months ago
JSON representation

react-decorate is a higher-order component which can help you concat className, merge style and forward the rest of props.

• Host: GitHub
• URL: https://github.com/tonytonyjan/react-decorate-props
• Owner: tonytonyjan
• Created: 2018-07-20T15:13:26.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-20T16:36:36.000Z (over 6 years ago)
• Last Synced: 2024-11-10T02:44:22.150Z (2 months ago)
• Topics: react, reactjs
• Language: JavaScript
• Size: 52.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/tonytonyjan/react-decorate-props.svg?branch=master)](https://travis-ci.org/tonytonyjan/react-decorate-props)

# react-decorate-props

react-decorate-props is a [higher-order component](https://reactjs.org/docs/higher-order-components.html) which can help you concat `className`, merge `style` and forward the rest of props. No more`const {className, style, ...others} = this.props` in `render()`.

# Usage

```jsx

// Instead of...

class Foo extends React.Component {

  render() {

    const { className, style, ...others } = this.props;

    const rootClass = "root";

    const rootStyle = { color: "red", backgroundColor: "green" };

    return (

      


    );

  }

}


// ...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 
;

  }

}

export default decorate(Foo);


// ...and in the consuming module...

;

// ... HTML output:

// 


```