simple_react_modal_component v1.0.5

React Modal Component

A customizable and easy-to-use React modal component for your web applications.

Table of Contents

• Installation
• Usage
• Props
• Styling
• Examples
• Contributing
• License

Installation

You can install this component using npm or yarn:

npm install simple_react_modal_component
# or
yarn add simple_react_modal_component

Usage

To use the Modal component, you need to manage a state variable in your React component that controls whether the modal is open or closed. Here's an example of how to set up the state and use the Modal component:

import React, { useState } from 'react';
import Modal from 'simple_react_modal_component';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      <Modal
        trigger={isOpen} // Pass the state variable here
        setTrigger={setIsOpen} // Pass the state update function here
        closingMsg="Close"
        popUpMsg="This is the modal content."
      />
    </div>
  );
}

export default App;

In the example above, we use the useState hook to create an isOpen state variable and setIsOpen function to manage the modal's open and close state. You can customize this state management according to your application's needs.

Props

The Modal component accepts the following props:

trigger (boolean, required): Controls whether the modal is open or closed.

setTrigger (function, required): A function that toggles the trigger state. Typically used to open or close the modal.

closingMsg (string, optional): Text for the close button. Default is "Close".

popUpMsg (string or JSX, optional): Content of the modal. You can pass text or JSX elements.

Styling

You can style the modal by including the provided CSS file modal.css. You may customize the styles to fit your project's design.

import 'simple_react_modal_component/modal.css';

License This project is licensed under the MIT License - see the LICENSE file for details.