Live demo and full doc

Dialog React

Dialog React is a React library created for the OpenClassrooms P14 project. It provides a simple and customizable dialog component.

Installation

Install the package with npm:

npm i @jean_b/rc-dialog

Usage

Import the necessary components and add the style:

import { Dialog, DialogTrigger, DialogContent } from "@jean_b/rc-dialog"

Manage the open/close state of the dialog:

const [isOpen, setIsOpen] = useState(false)

Use the Dialog, DialogTrigger and DialogContent components to create your dialog:

<Dialog 
    isOpen={isOpen} 
    setIsOpen={setIsOpen}
>
    <DialogTrigger onClick>
        <button>
            Open simple dialog
        </button>
    </DialogTrigger>
    <DialogContent titleId="dialogTitle" descriptionId="dialogDescription">
        <h1 id="dialogTitle">
            Dialog title...
        </h1>
        <p id="dialogDescription">
            Dialog description...
        </p>
    </DialogContent>
</Dialog>

Examples

You can find usage examples in the interactive demo

Features

• Simple dialog with an open button
• Dialog with custom event
• Accessibility management with titleId and descriptionId
• Customizable events on the trigger (click, hover, etc.)

Contribution

If you want to contribute to this project, feel free to open an issue or submit a pull request on the GitHub repository.

License

This project is under the MIT license.