More HOCs with Recompose

lifecycle with timeout toggle

by jonahe

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/build/Recompose.js"></script>
<div id="root"></div>

Babel + JSX

const { compose, withStateHandlers, branch, lifecycle,hoistStatics } = Recompose;

const withNamedToggler = (propertyNameBase, initialValue) => withStateHandlers(
	{ [`${propertyNameBase}IsToggled`] : initialValue },
  {
  	[`${propertyNameBase}Toggler`] : props => (e) => {
    		return { [`${propertyNameBase}IsToggled`]: !props[`${propertyNameBase}IsToggled`] };
    }
  }
);

const withFocusOnDidMount = (refName) => {
  return compose(
    lifecycle({ componentDidMount() {
        this[refName] && this[refName].focus();
        debugger;
    	}
    })
  );
};


class Simple extends React.Component  {
	render() {
  
	return (
  	<div>
    	<input ref={ input => this.myInput } />
    </div>
  );
  }
};

const SimpleWithAutofocus = hoistStatics(withFocusOnDidMount("myInput")(Simple));

const App = () => {
  return (
  	<div>
      <SimpleWithAutofocus />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));