Backdrop | Windmill React UI

Import

import { Backdrop } from '@windmill/react-ui'

Base

The default base Backdrop doesn't expose any prop, but you can still pass it event handlers, etc.

<Backdrop />

Complete example

This is what a complete example component looks like, with handlers, state, etc.

BackdropExample.js

import React, { useState } from 'react'
import { Backdrop, Button } from '@windmill/react-ui'
function DropdownExample() {
  const [isOpen, setIsOpen] = useState(false)
  function toggleBackdrop() {
    setIsOpen(!isOpen)
  }
  return (
    <div className="relative">
      <Button onClick={toggleBackdrop}>Open backdrop</Button>
      {isOpen && <Backdrop onClick={toggleBackdrop} />}
    </div>
  )
}
export default DropdownExample

Customizing

See Customization to learn how to change defaultTheme styles.