CodePen Embed - Hook component example

Live

This Pen is owned by Roman Komarov on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"VwGJKLW\",\"auto_save\":true},\"hashid\":\"VwGJKLW\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":67534447,\"user_id\":13252,\"html\":\"\",\"css\":\"\",\"js\":\"/** @jsx h */\\nimport { h, Component, Fragment, render } from \\\"https://cdn.skypack.dev/preact@10.13.2\\\";\\nimport { useEffect, useState, useMemo, useRef } from \\\"https://cdn.skypack.dev/preact@10.13.2/compat\\\";\\n\\ninterface HookProps<F extends (...args: any[]) => any> {\\n  hook: F;\\n  options?: Parameters<F>;\\n  getValue?: (value: ReturnType<F>) => void;\\n  children?: React.ReactNode | ((value: ReturnType<F>) => React.ReactNode);\\n}\\n\\nconst Hook = <F extends (...args: any[]) => any>({\\n  hook: useHook,\\n  options,\\n  getValue,\\n  children = null,\\n}: HookProps<F>) => {\\n  const value = useHook(...(options || []));\\n  useEffect(() => {\\n    if (getValue) {\\n      getValue(value);\\n    }\\n  }, [getValue, value]);\\n  return useMemo(\\n    () =>\\n      typeof children === 'function'\\n        ? children(value)\\n        : <Fragment>{children}</Fragment>,\\n    [children, value],\\n  );\\n};\\n\\nclass CounterClassExample extends Component {\\n  render() {\\n    return (\\n      <Fragment>\\n        <h2>Using a state hook inside a class component</h2>\\n        <Hook hook={useState} options={[0]} getValue={console.log}>\\n          {([count, setCount]) => (\\n            <button onClick={() => setCount(count + 1)}>\\n              bump this counter: {count}\\n            </button>\\n          )}\\n        </Hook>\\n      </Fragment>\\n    );\\n  }\\n}\\n\\n// https://www.joshwcomeau.com/snippets/react-hooks/use-interval/\\nconst useInterval = (callback, delay) => {\\n  const intervalRef = useRef(null);\\n  const savedCallback = useRef(callback);\\n  useEffect(() => {\\n    savedCallback.current = callback;\\n  }, [callback]);\\n  useEffect(() => {\\n    const tick = () => savedCallback.current();\\n    if (typeof delay === 'number') {\\n      intervalRef.current = window.setInterval(tick, delay);\\n      return () => window.clearInterval(intervalRef.current);\\n    }\\n  }, [delay]);\\n  return intervalRef;\\n}\\n\\nconst ConditionalHookExample = () => {\\n  const [isEnabled, setIsEnabled] = useState(false);\\n  const [count, setCount] = useState(0);\\n  return (\\n    <Fragment>\\n      <h2>Conditional hook</h2>\\n      {isEnabled ? (\\n        <Hook\\n          hook={useInterval}\\n          options={[() => setCount(prev => prev + 1), 1000]}\\n        />\\n      ) : null}\\n      <button onClick={() => setIsEnabled(prev => !prev)}>\\n        {isEnabled ? 'stop' : count ? 'restart' : 'start'} the interval hook\\n      </button>\\n      <p>Current value: {count}</p>\\n    </Fragment>\\n  );\\n}\\n\\nconst app = (\\n  <Fragment>\\n    <h1><a href=\\\"https://kizu.dev/hook-component/\\\" target=\\\"_blank\\\">Hook</a> examples</h1>\\n    <CounterClassExample />\\n    <ConditionalHookExample />\\n  </Fragment>\\n);\\n\\nrender(app, document.body);\\n\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"typescript\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2023-03-31T21:42:53.637Z\",\"updated_at\":\"2023-04-01T14:36:17.659Z\",\"title\":\"Hook component example\",\"description\":\"\",\"slug_hash\":\"VwGJKLW\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0187399f-99c5-70a9-b2e6-55a39bb8f17c\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-98018b12d50424943c3d.js"}