How do I use modals in React?

How do I use modals in React?

You can use the 'react-modal' library to create modals in React. First, install it using npm or yarn.

What are the basic steps to implement a modal?

1. Import the Modal component from 'react-modal'. 2. Set up a state to control its visibility. 3. Create a function to open and close the modal.

Can you show me a simple code example?

Sure! Here's a basic example:

import React, { useState } from 'react';
import Modal from 'react-modal';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal isOpen={isOpen} onRequestClose={closeModal}>
        <h2>My Modal</h2>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
};

export default App;

What if I want to customize the modal's styles?

You can customize the modal's styles by passing a 'style' prop to the Modal component. You can define your own CSS styles.