<Modal /> component
See original GitHub issueWill contains x
button and close
button to close
- The modal will be full screen
x
button and bottom bar (which will contains the buttons) are static- The modal’s content is scrollable
props:
-
onSave
- [optional] function (callback) -
onClose
- [optional] function (callback) -
title
- [optional] string
Eventually the use of this component will be via the useModal
hook.
For example, a simple alert modal will look something like this
export const Alert = () => {
const onSave = () => alert('saved');
return (<Modal onSave={onSave}>
Hi there
</Modal>);
}
Then, to show this alert, we’ll call to useModal
:
const [showAlert] = useModal(<Alert />);
showAlert();
(I hope that the example simplify the explanation 😅)
Thank you for your contribution. Please read the guide.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
React Modal component - Material UI - MUI
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. The component renders its children node in front ......
Read more >How To Implement a Modal Component in React - DigitalOcean
Build a modal component in your React project using props and state to control displaying and closing.
Read more >Modal - Bootstrap
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >Transactional modal - Carbon Design System
The modal is composed of three distinct zones: A header, the body, and a footer. Components (eg. data table, form, progress indicator) can...
Read more >Build a simple Modal Component with React - Bits and Pieces
Creating a Modal component structure. So, first let's add the boilerplate code. import React from "react";export default class Modal extends React.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thank you @Guin-! Let’s wait just a bit, ok?
Awesome! Will let you know if i have questions 😄