Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Usage
  2. More trigger events
  3. Prop Table

OuterEventsHandler

import { OuterEventsHandler } from '@duik/it'
import OuterEventsHandler from '@duik/outer-events-handler'

This fairly simple component will let you know if selected events were triggered outside it's wrapping element. This is useful in situations like dropdowns, selects or modals. The component is used in some components in this kit as well, however we find it useful to expose it for your own creativity!

How it works?

Simply wrap your content with OuterEventsHandler and pass a single argument, a function that will be triggered when one of the supported events fires. By default, only outer clicks or hitting "esc" on your keyboard will trigger a passed function. See more options in the prop table description or live examples below.

Try to click outside/inside this content or press esc
Outer Events: 0
<OuterEventsHandler onOuterEvent={handleOuterEvent}>
  <div style={{ padding: 50, background: 'orange', color: 'white' }}>
    Try to click outside/inside this content<br />
    Outer Events: {clicks}
  </div>
</OuterEventsHandler>
ReactHTML Snippet

This doesn't look that useful so far, let's see a real example of OuterEventsHandler in action with Dropdown, which is wrapped by OuterEventsHandler.

Dropdown Content
<Dropdown>
  <div
    style={{
      padding: 50,
      textAlign: 'center'
    }}
  >
    Dropdown Content
  </div>
</Dropdown>
ReactHTML Snippet

More trigger events

As mentioned above, OuterEventsHandler can trigger a passed function on different circumstances, even on window resize or scroll. We can pass those bool props directly to the Dropdown. Dropdown doesn't use those boolean properties directly, it passes them down to the OuterEventsHandler instead.

Open the dropdown below and try to scroll or resize the window.

Dropdown Content
<Dropdown triggerOnOuterScroll triggerOnWindowResize>
  <div
    style={{
      padding: 50,
      textAlign: 'center'
    }}
  >
    Dropdown Content
  </div>
</Dropdown>
ReactHTML Snippet

Prop table

className

Required: false

type: string
className, e.g. "my-custom-styling"
children

Required: false

type: React.ReactNode
onOuterEvent

Required: false

type: (e: Event) => void
Function which will be triggered when event occurs.
triggerOnOuterScroll

Required: false

type: boolean
If true, onOuterEvent will be triggered on window scroll event.
triggerOnWindowResize

Required: false

type: boolean
If true, onOuterEvent will be triggered on window resize event.
triggerOnOuterClick

Required: false

type: boolean

default value: true

If true, onOuterEvent will be triggered on document click event.
triggerOnOuterFocus

Required: false

type: boolean

default value: true

If true, onOuterEvent will be triggered on document focus event.
triggerOnEsc

Required: false

type: boolean

default value: true

If true, onOuterEvent will be triggered on document keydown event.
...rest

Required: false

type: any
Other properties are passed down to the wrapping div element