mDibyo’s gists

mDibyo / with-hooks-support-requirement-1-step-5.jsx

Last active February 17, 2019 19:56

	function withHooksSupport(Component) {
	return class ComponentWithHooksSupport extends Component {
	render() {
	const RenderFn = () => super.render();
	return <RenderFn />;
	}
	}
	}

mDibyo / with-hooks-support-requirement-1-step-4.jsx

Last active February 17, 2019 19:55

	function withHooksSupport(Component) {
	return class ComponentWithHooksSupport extends Component {
	render() {
	const withHook = (useHook) => {
	return useHook;
	}

	const WithHook = withHook(() => super.render());
	return <WithHook />;
	}

mDibyo / with-hooks-support-requirement-1-step-3.jsx

Last active February 17, 2019 19:55

	function withHooksSupport(Component) {
	return class ComponentWithHooksSupport extends Component {
	render() {
	const withHook = (useHook) => {
	return () => useHook();
	}

	const WithHook = withHook(() => super.render());
	return <WithHook />;
	}

mDibyo / with-hooks-support-requirement-1-step-2.jsx

Last active February 17, 2019 19:55

	function withHooksSupport(Component) {
	return class ComponentWithHooksSupport extends Component {
	render() {
	const withHook = (useHook) => {
	return ({ children }) => {
	const returnValue = useHook();
	return children(returnValue);
	}
	}

mDibyo / with-hooks-support-requirement-1-step-1.jsx

Last active February 17, 2019 19:54

	function withHooksSupport(Component) {
	return class ComponentWithHooksSupport extends Component {
	render() {
	const WithHook = withHook(() => super.render());
	return (
	<WithHook>
	{superRenderReturnValue => superRenderReturnValue}
	</WithHook>
	);
	}

mDibyo / with-hooks-support-requirement-2.jsx

Last active February 17, 2019 19:53

	class withHooksSupport(Component) {
	return class ComponentWithHooksSupport extends Component {
	// TODO
	}
	}

mDibyo / hooks-in-class-components-take-1.jsx

Created December 27, 2018 09:01

	class HookedInput extends React.PureComponent {
	render() {
	// `withHook` creates a new function component that calls `useFormInput`
	// that passes the return value to its children.
	const WithFormInputProps = withHook(useFormInput);
	return (
	<WithFormInputProps>
	{({ value, onChange }) => <input value={value} onChange={onChange} />}
	</WithFormInputProps>
	);

mDibyo / with-hooks-support-introduction.jsx

Created December 27, 2018 08:54

	import withHooksSupport from 'with-hooks-support';

	class Input extends React.PureComponent {
	render() {
	const { value, onChange } = useFormInput('Take 2!');
	return <input value={value} onChange={onChange} />;
	}
	}

	export default withHooksSupport(Input);

mDibyo / with-hooks-custom-hook-example.jsx

Created December 22, 2018 08:00

	class WindowInfo extends React.PureComponent {
	render() {
	const WithWindowWidth = withHook(() => {
	const [width, setWidth] = useState(window.innerWidth);
	const handleWindowResize = () => setWidth(window.innerWidth);
	useEffect(() => {
	window.addEventListener('resize', handleWindowResize);
	return () => window.removeEventListener('resize', handleWindowResize);
	});

mDibyo / with-hooks-introduction.jsx

Last active December 22, 2018 08:40

	import withHook from 'with-hook';

	class HookedInput extends React.PureComponent {
	render() {
	const WithFormInputProps = withHook(useFormInput);

	return (
	<WithFormInputProps>
	{({ value, onChange }) => <input value={value} onChange={onChange} />}
	</WithFormInputProps>

Dibyo Majumdar mDibyo