Skip to content

Commit

Permalink
Update modal documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
garronej committed Aug 21, 2024
1 parent 8034069 commit 1f559e7
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions stories/Modal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,40 @@ useIsModalOpen(
}
);
\`\`\`
You can have custom buttons to your modal, here is an example:
\`\`\`tsx
function MyModalWithCustomButton() {
return (
<modal.Component
title="My modal"
// This is an array of <button /> props objects with one additional property: doClosesModal
buttons={[
{
doClosesModal: true,
children: "Cancel",
},
{
doClosesModal: false,
children: "Ok",
onClick: async () => {
// Do something async
modal.close();
}
}
]}
>
My form
</modal.Component>
);
}
\`\`\`
To create a Dialog component, something that you would use to ask the user a question, like "Do you want to proceed?", you can implement this pattern:
- [Component](https://github.com/codegouvfr/react-dsfr/blob/main/test/integration/cra/src/MyDialog.tsx),
Expand Down

0 comments on commit 1f559e7

Please sign in to comment.