1.0.6 • Published 10 months ago

@tiny-bits/react-dialog v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Tiny Bits React Dialog

Zero dependency, accessible, and composable React dialog component built on top of the native <dialog> element.

Features

  • Fully controlled or uncontrolled usage
  • Modal option for modal behavior with backdrop added
  • Accessible, using native <dialog> element
  • Composable API with separate trigger and close buttons
  • TypeScript support

Installation

To install the dialog component in your project, run:

npm install @tiny-bits/react-dialog

Or if you're using yarn:

yarn add @tiny-bits/react-dialog

Usage

Here's a basic example of how to use the dialog component:

import {
  Dialog,
  DialogContent,
  DialogTrigger,
  DialogClose,
} from '@tiny-bits/react-dialog';

function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <h2>Dialog Title</h2>
        <p>This is the dialog content.</p>
        <DialogClose>Close</DialogClose>
      </DialogContent>
    </Dialog>
  );
}

Controlled Usage

You can control the dialog's open state externally:

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogTrigger,
  DialogClose,
} from '@tiny-bits/react-dialog';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <h2>Controlled Dialog</h2>
        <p>This dialog's state is controlled externally.</p>
        <DialogClose>Close</DialogClose>
      </DialogContent>
    </Dialog>
  );
}

Usage as a modal

To use dialog as modal:

<Dialog modal>{/* Dialog content */}</Dialog>

API

Dialog

Main component that wraps the entire dialog structure.

Props:

  • children: ReactNode
  • open?: boolean (default: false)
  • onOpenChange?: (open: boolean) => void
  • modal?: boolean (default: false)

DialogContent

The content of the dialog.

Props:

  • Extends DialogHTMLAttributes<HTMLDialogElement>

DialogTrigger

A button to open the dialog.

Props:

  • Extends ButtonHTMLAttributes<HTMLButtonElement>

DialogClose

A button to close the dialog.

Props:

  • Extends ButtonHTMLAttributes<HTMLButtonElement>

Styling

This is a headless component so you can style it however you want. Some default styles are provided and can be used by importing styles.css.

import '@tiny-bits/react-dialog/styles.css';

Example usage with Tailwind CSS:

<Dialog>
  <DialogTrigger className="rounded-md border p-2">
    Click me
  </DialogTrigger>
  <DialogContent className="self-center rounded-md shadow-lg">
    <div className="flex flex-col">
      Hello world!
      <div className="flex justify-end">
        <DialogClose className="p-2 border rounded-md">Bye</DialogClose>
      </div>
    </div>
  </DialogContent>
</Dialog>

Browser Support

This component is designed to work with modern browsers.

Accessibility

This component uses the native <dialog> element, which provides built-in accessibility features. The DialogTrigger and DialogClose components are properly labeled for screen readers.

License

MIT License

1.0.6

10 months ago

1.0.5

12 months ago

1.0.4

12 months ago

1.0.3

12 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

12 months ago