hooks-hooks-stories-mdx.548d4ef4.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[2644],{"../../node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{BN:()=>MDXContext,RP:()=>useMDXComponents,gz:()=>withMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents=useMDXComponents(components);return disableParentContext&&(allComponents=components||emptyObject),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"../../node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{H2:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.H2,Hl:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Hl,Pd:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Pd,Tn:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Tn,VY:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.VY,W8:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.W8,fy:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.fy,gG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.gG,hE:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.hE,oz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oz});__webpack_require__("../../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@storybook/blocks/dist/index.mjs")},"./src/hooks/hooks.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,__page:()=>__page,default:()=>hooks_stories});__webpack_require__("../../node_modules/react/index.js");var lib=__webpack_require__("../../node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs");const readmeraw_namespaceObject='# Hooks\n\n## useBeforeUnload\nThe `useBeforeUnload` hook is fired when the window, the document and its resources are about to be unloaded.\nThis hook accept a boolean value that indicates when this functionality should be active.\n\n### Related\n* https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent\n\n### Usage/Examples\n~~~javascript\nimport { useBeforeUnload } from from "@yoast/ui-library";\n\nconst Component = () => {\n    const [ hasUnsavedChanges, setHasUnsavedChanges ] = useState( false );\n\n    useBeforeUnload( hasUnsavedChanges );\n\n    return <div />;\n};\n~~~\n\n## useDescribedBy\nThe `useDescribedBy` hook creates ids and describedBy based on an ID and the given list of "props".\n\nThis is a helper hook to create IDs and the `aria-describedby` for our form field components.\n\nAccepts id (string) and list (object) and returns object with `ids` and `describedBy`.\n\n### Related\n* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n\n### Usage/Examples\n~~~javascript\nimport { useDescribedBy } from from "@yoast/ui-library";\n\nconst Component = () => {\n    const { ids, describedBy } = useDescribedBy( id, { error, description } );\n\n    return <div />;\n};\n~~~\n\n## useKeydown\nThe `useKeydown` hook adds and removes a listener to the document\' `keydown` event.\nThe hook accepts a callback function that is called when the event is triggered.\nThe callback function receives the KeyboardEvent as an argument.\n\n### Related\n* https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event\n* https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent\n\n### Usage/Examples\n~~~javascript\nimport { useKeydown } from from "@yoast/ui-library";\n\nconst Component = () => {\n  useKeydown( ( event ) => {\n    if ( event.key === "Escape" ) {\n      console.log( "Escape key pressed" );\n    }\n  }, document );\n\n  return <div/>;\n};\n\n~~~\n\n## useMediaQuery\nThe `useMediaQuery` hook creates a media query and returns a boolean that informs whether the query is met.\n\nAccepts `mediaQueryString` (string) The media query to check against.\nReturns an object with a .matches field that is true if the media query is met.\n\n### Related\n* https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia\n\n### Usage/Examples\n~~~javascript\nimport { useMediaQuery } from from "@yoast/ui-library";\n\nconst Component = () => {\n    const isSingleColumn = ! useMediaQuery( "(min-width: 1536px)" ).matches;\n\n    return <div />;\n};\n~~~\n\n## usePrevious\nThe `usePrevious` hook accepts the initial value and return the previous value.\n\n### Usage/Examples\n~~~javascript\nimport { usePrevious } from from "@yoast/ui-library";\n\nconst Component = () => {\n    const previousCompanyOrPerson = usePrevious( companyOrPerson );\n\n    return <div />;\n};\n~~~\n\n## useRootContext\n\nThe `useRootContext` hook returns the root context.\n\n### Usage/Examples\n~~~javascript\nimport { useRootContext } from from "@yoast/ui-library";\n\nconst Component = () => {\n    const { isRtl } = useRootContext();\n\n    return <div className={ isRtl ? "yst-ml-4" : "yst-mr-4" } />\n\n};\n~~~\n\n## useSvgAria\n\nThe `useSvgAria` hook creates aria attributes for an SVG.\nAccepts boolean value to indicate if it should be focusable, returns object with `role` and `aria-hidden` and optionally `focusable`.\n\n### Related\n* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role\n* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden\n* https://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr\n\n### Usage/Examples\n~~~javascript\nimport { useSvgAria } from from "@yoast/ui-library";\n\nconst Component = () => {\n    const ariaSvgProps = useSvgAria();\n\n    return <RandomIcon { ...ariaSvgProps } />;\n};\n~~~\n\n## useToggleState\n\nThe `useToggleState` hook creates a toggle state.\nAccepts boolean value the initial state, defaults to true, returns the state, toggleState, setState, setTrue and setFalse in that order.\n\nThe order of the returned values is significant. If you use only some values, and they are not in the beginning of the array, you have to leave empty space for the unused values.\n\nCorrect usage example:\n\n~~~javascript\nconst [ state, toggleState ] = useToggleState();\n\nconst [ state, , , setTrue, setFalse ] = useToggleState();\n~~~\n\n### Usage/Examples\n\n~~~javascript\nimport { useToggleState } from from "@yoast/ui-library";\n\nconst Component = () => {\n   const [ state, toggleState, setState, setTrue, setFalse ] = useToggleState();\n\n   return (\n       <div>\n           <button onClick={ toggleState }>Click Here to Toggle state</button>\n           <button onClick={ setTrue }>Click Here to change state to true</button>\n           <button onClick={ setFalse }>Click Here to change state to false</button>\n           <button onClick={ () => setState( true ) }>setState to true</button>\n           <button onClick={ () => setState( false ) }>setState to false</button>\n\n           { state ? <div>State is true</div>:<div>State is false</div> }\n        </div>\n    );\n};\n~~~\n';var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");function _createMdxContent(props){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Other exports/Hooks"}),"\n",(0,jsx_runtime.jsx)(dist.oz,{children:readmeraw_namespaceObject})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Other exports/Hooks",tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.RP)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent()}};const hooks_stories=componentMeta,__namedExportsOrder=["__page"]},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);