Backdrop

Import

import { Backdrop } from '@narimanb/wreactui'

Base

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

Code

<Backdrop />

Complete example

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

Code

import React, { useState } from 'react'
import { Backdrop, Button } from '@narimanb/wreactui'

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