https://github.com/kenza15a/modal-react-lib

final react modal library for the P14 project
https://github.com/kenza15a/modal-react-lib

Last synced: about 1 month ago
JSON representation

final react modal library for the P14 project

• Host: GitHub
• URL: https://github.com/kenza15a/modal-react-lib
• Owner: kenza15a
• Created: 2023-11-06T12:36:39.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-30T08:38:37.000Z (about 1 year ago)
• Last Synced: 2024-11-14T11:09:03.725Z (about 1 month ago)
• Language: CSS
• Size: 413 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# dynamic-modal-library

> description : A modal library created with react js that can be imported for use in all react js projects

the used syntax is jsx  ,the ibrary is react component with many props that are well explained in the example section of this file 

[![NPM](https://img.shields.io/npm/v/react-modal-lib.svg)](https://www.npmjs.com/package/react-modal-lib) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

##prerequisites 

Node js must be installed

the version used must be above 16 

## Install

```bash

npm install  react-dynamic-modal-lib

If not working try for any legacy problems 

npm install  react-dynamic-modal-lib --legacy-peer-deps

```

## Usage

To use this component you have to manage it's state using

the react hook useState as follows:

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

const openModal = () => {

setIsModalOpen(true);

};

const closeModal = () => {

setIsModalOpen(false);

};

########

Here is a complete example of use 

```jsx functional component 

import React, { Component } from 'react'

import  ModalComponent  from "dynamic-modal-library";

import 'dynamic-modal-library/dist/index.css'

import { useState } from 'react' 

  

  const ExampleComponent = () => {

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

  const openModal = () => {

    setIsModalOpen(true);

  };

  const closeModal = () => {

    setIsModalOpen(false);

  };

  return (

    <>

      {/*button to opn the modal and change the state of isOpen to true */}

      

        open modal

      

      {

          /*Open the modal with the needed props isOpen for state management 

          //contentComponent :receives any react component you have in your project 

          //closeFunction the function that closes the modal  

          //you can also add other props :

          //@param {Boolean} okButtonState   a button will be added din the middle of the react modal 

          // @param {Function} buttonFunction  the button will have an event using this function

          // @param {string} buttonText  the text of the added button 

          */

        isModalOpen && (Hi modal lib s

          }

          closeFunction={closeModal}

        />)

      }

    >);

}

export default ExampleComponent

## License

MIT © [kenzaFilali] (https://github.com/kenza15a)