15 lines
660 B
TypeScript
15 lines
660 B
TypeScript
import { usePersistentState } from "@/App/persistent_state"
|
|
import { DetailsHTMLAttributes, PropsWithChildren } from "react";
|
|
|
|
type Props = {
|
|
localStorageKey: string,
|
|
initiallyOpen?: boolean,
|
|
} & DetailsHTMLAttributes<HTMLDetailsElement>;
|
|
|
|
// A <details> node that remembers whether it was open or closed by storing that state in localStorage.
|
|
export function PersistentDetails({localStorageKey, initiallyOpen, children, ...rest}: PropsWithChildren<Props>) {
|
|
const [open, setOpen] = usePersistentState(localStorageKey, initiallyOpen);
|
|
return <details open={open} onToggle={e => setOpen(e.newState === "open")} {...rest}>
|
|
{children}
|
|
</details>;
|
|
}
|