Components

Filter Range

Storybook

The FilterRange component allows users to filter a range of numeric values in an application. It has two numeric inputs for entering a minimum and maximum value, and can activate callback functions on both the "apply" and "reset" buttons.

Imports

1import { FilterRange } from 'dd360-ds'

Usage

Use the FilterRange component as shown below:

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

1import { FilterRange } from 'dd360-ds''
2
3<FilterRange
4  onApply={() => console.log('Apply function')}
5  onReset={() => console.log('Reset function')}
6  position={{
7    top: 0,
8    left: 0,
9    show: true
10  }}
11  title="Filter range name"
12/>
13

Visibility & position

To manage the FilterRange component's visibility and position, you can use the useState hook in a functional component. Position stores the top and left coordinates, as well as a boolean indicating whether the component should be shown. The component listens for clicks on a button, which toggles the FilterRange's visibility and updates its position based on the click event's coordinates.

The code snippet below shows how to handle the visibility and position:

1import { FilterRange } from 'dd360-ds'
2
3const FilterComponent = () => {
4  const [domLoaded, setDomLoaded] = useState<boolean>(false)
5  const [position, setPosition] = useState<{
6    top: number
7    left: number
8    show: boolean
9  }>({
10    top: 0,
11    left: 0,
12    show: false
13  })
14
15useEffect(() => { setDomLoaded(true) }, [])
16
17return (
18    <>
19      {domLoaded && (
20        <div>
21          <button
22            className="flex items-center gap-1"
23            onClick={(event) => {
24              setPosition((position) => ({
25                top: event.pageY,
26                left: event.pageX,
27                show: !position.show
28              }))
29            }}
30          >
31            <Text size="lg" bold>
32              Filter range on top
33            </Text>
34            <DynamicHeroIcon icon="FilterIcon" className="w-4 h-4" />
35          </button>
36          <FilterRange
37            max={300}
38            min={30}
39            onApply={() => undefined}
40            onReset={() => undefined}
41            position={{
42              top: position.top - 180,
43              left: position.left,
44              show: position.show
45            }}
46            title="Filter range name"
47          />
48        </div>
49      )}
50    </>
51  )
52}
53
54export default FilterComponent
55 

Note: The "domLoaded" state variable in the FilterComponent is used to ensure that the component is fully rendered before displaying the FilterRange component. This is important when using Next.js, as it performs server-side rendering by default. By waiting for the client-side rendering to complete, we can avoid any issues with the FilterRange component not being fully initialized.

Min & max

The "min" and "max" values are used to set boundaries for the selected range, while the "defaultMin" and "defaultMax" values are used to set the initial values of the range when the FilterRange component is first opened. If the user enters a value that is outside the specified range, an alert will be displayed when they click the "Apply" button. It is recommended to set sensible values for "min" and "max" to avoid confusing the user. Also you can use the textMin and textMax properties to set a custom text in the FilterRange.

The code snippet below shows how to set a minimum and maximum value:

1import { FilterRange } from 'dd360-ds'
2
3<FilterRange
4  max={100}
5  min={30}
6  onApply={() => undefined}
7  onReset={() => undefined}
8  title="Filter range name"
9  defaultMax={100}
10  defaultMin={30}
11  textMax='Custom max text'
12  textMin='Custom min text'
13/>
14
15 

API Reference

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