Comment on page
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:
