How to Setup a popover
In this section, we'll describe how to use the popover feature
Use case:
Display a popup based on a user action such as button click, etc.
TL;DR:
Here are some high-level steps on how to do this. Look in the next section for detailed instructions:
- 1.Create a figma file with a simple button and a popover text field
- 2.Sync the component to Quest and setup the Popover feature on the Text field. Add a onClick binding on the Button to invoke the popover
- 3.Modify the react hook to control the behavior of the popover
Detailed Instructions:
In this example, we’ll demonstrate how to show a popover when the user clicks the button
- 1.Create a simple figma component as shown below. All you need is a simple button and a text field will be used for the popover. Below shows the layers and the Figma design:
- 2.Sync the above component from Figma to Quest.
- 3.In Quest, add the onClick binding for the button and the popover feature for the Textfield as shown below:
- 1.Setup onClick binding on the Button. Specify the function to call. This function will be generated in the react hook file for you to modify and add logic for handling the popover
- 2.Add the popover feature on the Textfield as shown below:
- 1.
- 3.Download the entire App package
- 1.
- 4.Modify the react hook generated as below:
- 1.Specifically, modify the showPopover and closePopover functions to show/hide the Text popover
import React, {useState} from 'react';const useSamplePopover = () => {const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);let data: any = {anchorEl};const showPopover = (event: React.MouseEvent<HTMLButtonElement>): any => {setAnchorEl(event.currentTarget);};const closePopover = (): any => {setAnchorEl(null);};let fns: any = { showPopover, closePopover };return { data, fns };};export default useSamplePopover; - 5.Install the dependencies and run the app:
- 1.npm i
- 2.npm start
- 6.You should see the below on your local host:
- 1.
- 2.Click the SHOW POP button and you'll see the popover. You can adjust the anchor position in the popover binding depending on your requirements.
- 1.
