JSPM – react-ball-modal@2.0.0

Package Exports

react-ball-modal
react-ball-modal/src/main.jsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ball-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

React

INSTALLATION

You can install react-ball-modal via npm:

npm install react-ball-modal

Usage

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

import { useState } from 'react'
import Modal from 'react-ball-modal/src/components/Modal'

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

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

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

  return (
    <main>
      <h1 className='mainTitle'>Ball Modal</h1>
      <button className='button' onClick={handleOpenModal}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={handleCloseModal} message="Choose your content !" />
    </main>
  )
}

export default App

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.

react-ball-modal