https://github.com/cyril-develop/custom-modal-reactjs

https://github.com/cyril-develop/custom-modal-reactjs

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/cyril-develop/custom-modal-reactjs
• Owner: Cyril-Develop
• Created: 2024-04-21T08:08:19.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-11T08:35:14.000Z (8 months ago)
• Last Synced: 2024-10-12T18:12:06.494Z (3 months ago)
• Language: TypeScript
• Size: 14.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Custom Modal

## 🚀 Getting Started

Install This package :

```

npm install reactjs-custom-modal

```

![Screenshot](./src/assets/screenshot.png)

## ✨ Example:

```js

import React, { useState } from 'react';

import { Modal } from "reactjs-custom-modal";

function App() {

  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {

    setIsModalOpen(true);

  };

  const closeModal = () => {

    setIsModalOpen(false);

  };

  return (

    


      Open Modal

      

    

  );

}


export default App;

```

## 📌 Props

| Prop              | Description                                   | Default     |     

|-------------------|-----------------------------------------------|-------------|

| text              | The text that will be displayed in the modal |             |

| isOpen            | A boolean that will open the modal if true   |             |

| onClose           | The function that will close the modal       |             |

| textColor         | The color of the text in the modal           | #fff (white)|

| backgroundColor   | The background color of the modal             | #157846 (green) |

| iconColor   | The color of the icon            | red |