This is a proof of concept for an api that generates nav items based on hooks.
Wrap any components that use toolbar hooks with a Parent
component. Now these components can use the useToggle
and useTextfield
hooks. These hooks will generate inputs that render in the nav bar, and return their current values.
This will add two inputs to the nav bar, and render their values
function Child() {
const [toggle, setToggle] = useToggle(false, "Toggle");
const [text, setText] = useTextfield("", "Text box");
return (
<div>
<div>Toggle: {toggle.toString()}</div>
<div>Text: {text}</div>
</div>
);
}
I'm not entirely sure. I am making this as a proof of concept to demonstrate one way we can generate the unique-to-each-view toolbars in ePlant. We could leave rendering the toolbar as the responsibility of each view, but this might lead to a user experience that isn't consistent enough, and feels more like a set of separate programs. We could also allow each view to provide a configuration object for the toolbar, but that might require more boilerplate than a system with hooks like this.