1.0.8 • Published 1 year ago
simplereactdialogcomponent v1.0.8
simplereactdialogcomponent
A React component to render a simple dialog component.
Install
npm i simplereactdialogcomponent
Install dependencies
npm install react@^18.2.55 react-dom@^18.2.19 prop-types@^15.8.1
Dialog component
Properties
Prop | Type | Description |
---|---|---|
isOpen | Boolean | Show if the dialog component is open or closed |
onClose | Function | Callback to close the dialog component |
content | Object | Object containing title and buttonText keys for the dialog's title and the close button text. |
Usage Examples
<Dialog
isOpen={isOpen}
onClose={handleClose}
content={{ title: 'Dialog Title', buttonText: 'Close' }}
/>
Example usage within a React component:
import React, { useState } from 'react';
import Dialog from 'simplereactdialogcomponent';
function App() {
const [isOpen, setIsOpen] = useState(false);
const handleClose = () => setIsOpen(false);
const handleOpen = () => setIsOpen(true);
return (
<div>
<button onClick={handleOpen}>Open Dialog</button>
<Dialog
isOpen={isOpen}
onClose={handleClose}
content={{ title: 'Dialog Title', buttonText: 'Close' }}
/>
</div>
);
}
You can override the default style by using the style prop:
<Dialog
style={{ backgroundColor: 'lightblue' }}
isOpen={isOpen}
onClose={handleClose}
content={content}
/>
Accessibility
The dialog component respects accessibility best practices, such as trapping focus within the dialog component when open and returning focus to the last focused element upon closure.
Additionally, the dialog component can be closed by:
- clicking on the dialog component close button
- clicking outside of the dialog component
- navigate to the close button using Tab key, and pressing Enter key
Dependencies
"peerDependencies": {
"react": "^18.2.55",
"react-dom": "^18.2.19",
"prop-types": "^15.8.1"
}
License
This component is distributed under MIT license.