A Simple HOC

a-simple-hoc.markdown

A Simple HOC

A Pen by K.C.Ashish Kumar on CodePen.

License.

App.md

A Simple HOC

(for React)

index.html

<div id="app"></div>

script.babel

const { Fragment } = React;

const MyHOC = function (InputComponent) {
   let myCustomProps = {
      style: {
         color: "red",
         "font-family": "Verdana",
         "font-size": "20px"
      },
      onClick: function () {
         alert("You clicked this button");
      }
   };
   return function (props) {
      return <InputComponent {...props} {...myCustomProps} />;
   };
};

const App = function () {
   let MyButton = MyHOC("button");
   return (
      <Fragment>
         <span>A Simple Button</span>
         <br />
         <button>click me</button>
         <br /><br/>
         <span>A HOC Button</span>
         <br />
         <MyButton>click me</MyButton>
      </Fragment>
   );
};

ReactDOM.render(<App />, document.getElementById("app"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>