How to Create a custom modal in Reactjs

Question

we need to create a modal dialog with overlay background in Reactjs as React components.when the user click on the overlay ,the modal should be closed.we need to create the modal in a way that it is reusable React component. somebody plz guide me home i can implement this

Take a look at react-bootstrap - it implements the functionality you are searching for. — CapCa
– CapCa, Commented Apr 20, 2016 at 15:47
do you want this modal to contain always the same html (jsx) structure or specific html for each case? — stkvtflw
– stkvtflw, Commented Apr 29, 2016 at 12:32

Community · Accepted Answer · 2017-05-23 11:59:35Z

2

I highly recommend strolling through react-modal's source https://github.com/reactjs/react-modal for "how to" implement your own.

I've gone down this route of implementing custom modals from scratch a few times myself now, and I must recommend simply pulling in react-modal rather than attempting to reinvent that same wheel [I've since replaced homegrown implementations w/ react-modal]. I've experimented w/ a few different React modal packages and react-modal is fully customizable, battle tested, and has a great API.

I have answered nearly identical questions here: How to: ES6 React Modal and here: React conditional render pattern with some more thoughts/examples/links.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Apr 20, 2016 at 16:35

Erik Aybar

4,8211 gold badge25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr Lister · Accepted Answer · 2016-04-29 12:25:42Z

0

Just for alternative route you could use the new <dialog> element, the browser support is rather low (http://caniuse.com/#search=dialog), but with polyfill this could be fixed. But this gives quite easy and extendable way to create dialogs, see demo here.

edited Apr 29, 2016 at 12:25

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Apr 20, 2016 at 20:20

Risto Novik

8,30511 gold badges52 silver badges67 bronze badges

1 Comment

Erik Aybar Over a year ago

This is the first I've heard of a native dialog element. Wow, that is going to be amazing once browser support catches up! I'm going to have to keep an eye on this one.

Collectives™ on Stack Overflow

How to Create a custom modal in Reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related