This is a reference for how to show a dialog, and a precursor to how a form _might_ work.
npm install @borvik/use-dialogThis is a reference for how to show a dialog, and a precursor to how a form _might_ work.
``tsxdialog
function pageComponent() {
/**
* EditDialog is the form component taking the data to use in it.
* It doesn't _actually_ get rendered at this point (console.log
* confirmed within EditDialog).
*
* - if open, will contain the rendered dialog - wrapped with a DialogContext and a dialog element. THIS is what should be rendered.showDialog
*
* a function that returns a promise, which completes when the dialog is closed.
*/
const {dialog, showDialog} = useDialog(
return (
// The EditDialog component:
export const EditDialog: React.FC<{data?: FormState}> = (props) => {
// useFormState is a custom hook for keeping an empty state for unchanged form data, but allowing the variable to contain the full set of data merged with the state.
const [form, setForm] = useFormState
first_name: '',
last_name: '',
});
// onSubmit - if set, contents are wrapped in a form, if not
// any change must be handled completely here
return
// not really sure _how_ to handle errors yet
if (form.first_name === 'fail')
throw new Error('test');
close(form);
}}>