modal-weather v0.1.3

Modal window

Hey, I just built my first package and there is the way to use my modal from npm.

https://www.npmjs.com/package/modal-weather

Installation

Install my-project with npm

 npm i modal-weather

 use the link to import the modal in your component :

 import Modal from 'modal-weather/dist/components/modal'

 there is 4 params inside the modal to use:


 use the component in that way : 
    exemple:

   <Modal
    text='Thank you',
    />

Props Reference

How to use the props and the event associated

Documentation

The css can be import through the css file inside the package.

And the modal can be display in that way.

for an exemple : just change the Form component by a button event with openModal onclick action:

import 'modal-weather/dist/components/styles/modal.css'
import React from 'react';
import '../App.css';
import Modal from 'modal-weather/dist/components/modal'
import { useState } from 'react';


const ModalPage =()=> {
  const [modalOpen, SetModal] = useState(false)

  const closeModal = () => {
      SetModal(false)
      
    }
  
  
  const openModal =(e)=> {
    e.preventDefault()
    SetModal(true)
    setTimeout(() => {
    document.getElementById('modal').classList.add('modal-open')
    document.getElementById('modalOverlay').style.display ="block"},)
}

  
  return (
    modalOpen ? 
      <div id="App">
        <Modal
          className={'modal'}
          style={{opacity: '100',color: "black"}}
          text={"Employee Successfully Created !"}
         close={closeModal}/>
        <button onClick={openModal}>Open</button>
      </div> 
    : 
    <div>
    <div id="App" style={{display: 'none'}} >  
      <Modal
        className={'modal'}
        style={{opacity: '100',}}
        text={"Employee Successfully Created !"}
        close={closeModal}/>
    </div> 
    <div>       
    <button onClick={openModal}>Open</button>
  </div> 
  </div>
      
  );
}

export default ModalPage;

there is a basic style for the modal centered and background opacity.

🔗 Links

Thank You, if you want to give me some comments im open to it. Glad to share my first work on npm!