1.0.6 • Published 1 year ago
p14lib v1.0.6
React modal component
A accessible modal dialog component for React.JS
React minimum version
- React (>= 18.2)
Installation
npm install p14libUsage
import React from 'react';
import { Modal } from 'p14lib';
export default function Index() {
const [opened, setOpened] = useState(false);
return (
<Modal styles={{body: {backgroundColor: '#000', color: '#FFF'}}} opened={opened} onClose={() => setOpened(false)}>
<p style={{margin:'8px 6px'}}>Modal opened !</p>
</Modal>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
opened | boolean | false | If true, the modal is open |
onClose | function | () => {} | Callback fired when the component requests to be closed. |
title | ReactNode or undefined | undefined | Modal title |
styles.root | object | {} | Styles to apply to the modal |
styles.overlay | object | {} | Styles to apply to the modal overlay |
styles.content | object | {} | Styles to apply to the modal content |
styles.close | object | {} | Styles to apply to the modal close button |
styles.title | object | {} | Styles to apply to the modal title |
styles.body | object | {} | Styles to apply to the modal body |
styles.header | object | {} | Styles to apply to the modal header |