react-ball-modal

2.2.6 • Public • Published

REACT BALL MODAL v2.2.6

A simple React modal component with a ball design.

DESCRIPTION

React Ball Modal is a lightweight and customizable modal component for React applications.

Prerequisites

Before using this modal component, make sure you have the following dependency installed:

INSTALLATION

You can install react-ball-modal via npm:

npm install react-ball-modal

Usage

Here's an example of importing and using the Modal component in your project:

import Modal from 'react-ball-modal'

function MyComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handleOpenModal = () => {
    setIsModalOpen(true)
  }

  const handleCloseModal = () => {
    setIsModalOpen(false)
  }

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={handleCloseModal} message='Choose your content !' />
    </div>
  )
}

export default MyComponent

Props

  • isOpen (boolean, required): Controls whether the modal is open or closed.
  • onClose (function, required): Callback function to handle closing the modal.
  • message (string): Message to display inside the modal.

Styling

To apply the default styles provided with the Modal component, you can import the default CSS file into your project:

import 'react-ball-modal/src/index.css'

License

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

Package Sidebar

Install

npm i react-ball-modal

Weekly Downloads

35

Version

2.2.6

License

none

Unpacked Size

7.15 kB

Total Files

9

Last publish

Collaborators

  • sophiepicard