open-index/open-npm huggingface dataset:
npm package: @nawfal07/modal
Description:  Modal component for React projects
Author: Nawfal Hamdi
Latest version: 1.0.8

# Modal Component

A customizable, focusable modal component for React that displays centered text with a close-on-blur feature. This component is ideal for popups, notifications, or dialogs.

## Installation

```bash
npm install @nawfal07/modal
```

## Usage

```
import React, { useState } from 'react';
import Modal from './Modal'; // Adjust import path as needed

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={handleClose} text="Hello, World!" />
    </div>
  );
}

export default App;

```

## Props

| Prop    | Type     | Description                                                                              |
| ------- | -------- | ---------------------------------------------------------------------------------------- |
| isOpen  | boolean  | Determines if the modal is visible. Set to true to display the modal.                    |
| onClose | function | A callback function that closes the modal, triggered on blur (when focus moves outside). |
| text    | string   | The text content displayed within the modal.                                             |