How-to Invoke a modal Dialog Box from a Button Click

Use case: Display a modal dialog box based on a user action such as button click, etc.

Steps:

1. Create a Figma component with the below layout. You can use any of the form samples we have in the Quest Component library to get started or you can design your own.

   
2. Export the components to Quest. Within the Quest editor, select the Contact Us frame layer in the left side panel and set the Dialog Feature as shown below.

   
3. Add the onClick binding on the Contact Us button

   
4. Select the ContactUs form and pass the Nested Prop Values as below:

   
5. Open the ContactUs form in the Quest editor and add the below two props: open and onClose

   
6. Add the Visible binding to the top frame of ContactUs to control the visibility. Set the visible binding to props.open

   
7. Add the onClick binding to the SUBMIT button:

   
8. Download the code and add the below logic to the use hook file:

   import React from 'react';
   const useDialogSample = () => {
     const [isDialogOpen, setIsDialogOpen] = React.useState(false);
   
     let data: any = {isDialogOpen};
     const toggleDialog = (): any => {
       setIsDialogOpen(!isDialogOpen);
     };
   
     let fns: any = { toggleDialog };
   
     return { data, fns };
   };
   
   export default useDialogSample;

9. Download and run the app (npm i, npm start or npm run dev). You will see the below when you click the CONTACT US button: