Components

Dropdown

The Dropdown component in React is a Dropdown that is used to make the user render content that we only want to show him if he clicks on the Dropdown component. It is commonly used in web and mobile applications to show additional options or available actions.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Dropdown from 'dd360-ds/Dropdown'

1import { Dropdown } from 'dd360-ds'

Usage

To use the Dropdown correctly, make sure to use the Dropdown.Menu and Dropdown.Trigger:

Dropdown.Trigger: the visible part of the Dropdown that the user can interact with to open or close the Dropdown menu.
Dropdown.Menu: This is the container that appears when the user interacts with the Dropdown.Trigger. It contains the list of options that the user can select.

Here is an example of how the Dropdown works:

The code snippet below shows how to use the Dropdown component:

1import { Dropdown } from 'dd360-ds''
2
3<Dropdown>
4  <Dropdown.Trigger>
5    <Button className="h-10 pt-2 pb-3" paddingX="3">
6      <Text size="xs" bold className="text-white">
7        Trigger
8      </Text>
9    </Button>
10  </Dropdown.Trigger>
11  <Dropdown.Menu> 
12    <Text className="px-5" size="base" bold>
13      Content
14    </Text>
15  </Dropdown.Menu>
16</Dropdown>
17

Disable Animation

The disableAnimation prop is used in the Dropdown to disable animations on the display. By enabling this prop, the Dropdown menu will instantly display without any transition or animation effect.

Here is an example of how the disableAnimation prop works in the Dropdown:

The code snippet below shows how to use the prop disableAnimation in the Dropdown:

1import { Dropdown } from 'dd360-ds''
2
3<Dropdown disableAnimation>
4  <Dropdown.Trigger>
5    <Button className="h-10 pt-2 pb-3" paddingX="3">
6      <Text size="xs" bold className="text-white">
7        Trigger
8      </Text>
9    </Button>
10  </Dropdown.Trigger>
11  <Dropdown.Menu> 
12    <Text className="px-5" size="base" bold>
13      Content
14    </Text>
15  </Dropdown.Menu>
16</Dropdown>
17

Support Server Side Rendering

For applications that use server-side rendering, you can ensure that the Dropdown component is fully rendered before displaying it by using the domLoaded state variable. This helps avoid any issues that may arise due to server-side rendering.

Example usage:

1import { Dropdown } from 'dd360-ds'
2
3const DropdownComponent = () => {
4  const [domLoaded, setDomLoaded] = useState<boolean>(false)
5
6  useEffect(() => setDomLoaded(true), [])
7
8  return (
9    <>
10      {domLoaded && (
11        <Dropdown>
12          <Dropdown.Trigger>
13            <Button className="h-10 pt-2 pb-3" paddingX="3">
14              <Text size="xs" bold className="text-white">
15                Trigger
16              </Text>
17            </Button>
18          </Dropdown.Trigger>
19          <Dropdown.Menu> 
20            <Text className="px-5" size="base" bold>
21              Content
22            </Text>
23          </Dropdown.Menu>
24        </Dropdown>
25      )}
26    </>
27  )
28}
29
30export default DropdownComponent
31

API Reference

Name	Types	Default
"disableAnimation"	boolean	false
"children"	ReactNode	-

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

Date PickerDynamic Hero Icon