^{hiki - a dialog will turn into a drawer on small viewport}

Preview

Preview the example on https://hiki.minhle.space/

Quick start

Uncontrolled

import { Dialog } from "@monodyle/hiki"; // not published yet...

function Application() {
  return (
    <Dialog target={({ open }) => <button onClick={open}>Open Dialog</button>}>
      {({ close }) => (
        <div className="content">
          {/* your code goes here */}
        </div>
      )}
    </Dialog>
  )
}

Controlled

import { Dialog } from "@monodyle/hiki"; // not published yet...

function Application() {
  const [open, setOpen] = useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen} target={<button onClick={() => setOpen(true)}>Open Dialog</button>}>
      <div className="content">
        {/* your code goes here */}
      </div>
    </Dialog>
  )
}

Development

yarn # install dependencies
yarn dev # make it awesome

Author

• @monodyle - Twitter

References

Inspired by Devon Govett

License

MIT © Monody Le 2023+