refactor(components): replace items prop in Navbar component - www.armandphilippot.com

diff options

author	Armand Philippot <git@armandphilippot.com>	2023-11-21 16:10:20 +0100
committer	Armand Philippot <git@armandphilippot.com>	2023-11-21 18:17:47 +0100
commit	c6212f927daf3c928f479afa052e4772216a2d8a (patch)
tree	6bb71d9cea03e110d10120ba4bf24e3a6f4ff7d0 /src/utils/hooks/use-form/use-form-submit
parent	70b4f633a6fbedb58c8b9134ac64ede854d489de (diff)

refactor(components): replace items prop in Navbar component

* replace `items` prop with `children` prop: it is more readable this way, * handle navbar item state inside NavbarItem component: it avoid using three differents states and their methods to do exactly the same thing * remove useAutofocus hook since we can't use it anymore * add `onActivation` and `activationHandlerDelay` prop to NavbarItem component to be able to focus the search input only when the item is activated (it replicates the functioning of useAutofocus hook) * replace `ref` type in SearchForm component: it does not make sense to use an input ref for a form. Instead I use useImperativeHandle to provide different a focus method to the given ref.

Diffstat (limited to 'src/utils/hooks/use-form/use-form-submit')

0 files changed, 0 insertions, 0 deletions

import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; /** * Use `document.querySelectorAll`. * * @param {string} query - A query. * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list. */ const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>( query: string ): NodeListOf<HTMLElementTagNameMap[T]> | undefined => { const [elements, setElements] = useState<NodeListOf<HTMLElementTagNameMap[T]>>(); const { asPath } = useRouter(); useEffect(() => { setElements(document.querySelectorAll(query)); }, [asPath, query]); return elements; }; export default useQuerySelectorAll;


context:
space:
mode: