React.js dialog component

This guide will help you render dialog components with React.js. If you're not familiar with setting up a new React web project, please refer to the React documentation.

Install

In order to install the components run the following:

npm install onedash-dialog

Storybook

The documentation and examples can be found here.

Usage

All the described components can be imported from "onedash-dialog".

Example:

import React from "react";

const BasicDialog = () => {
	const [isOpen, updateIsOpen] = React.useState(false);

	const close = () => {
		updateIsOpen(false);
	};

	return (
		<div>
			<div className="card">
				<ExampleContent />
			</div>
			<Dialog isOpen={isOpen} onClose={close}>
				<ExampleContent />
				<div className="buttons">
					<button className="cancel" onClose={close}>
						Cancel
					</button>
					<button className="submit" onClose={close}>
						Submit
					</button>
				</div>
			</Dialog>
		</div>
	);
};

Styling

Most components come without any style. You can adjust it yourself by CSS. If you like the style in this documentation, you can use our stylesheet from here.