My Simple React Modal Plugin : milooz-modal-ts-rc

A simple Modal Plugin for React applications.

🛒 1.Installation

#Use your favorite package manager (pnpm,npm,...)
npm install milooz-modal-ts-rc
  OR
pnpm install milooz-modal-ts-rc

🎯 2.Settings

Global Settings

package.json

📚 3.Usage

Import Modal Component in JSX/TSX file

//App.tsx
import { useState } from 'react';

import {Modal} from 'milooz-modal-ts-rc';

function App() {

  const  [visibleModal, setVisibleModal] = useState<boolean>(true);

  function closeModal() {
    setVisibleModal(false);
  }

  return (
    <>
        <Modal 
          success={visibleModal} 
          closeModal={() => {closeModal()}} 
          newUser={{firstName:"John",lastName:"Doe"}}
          />
    </>
  )
}
export default App

💡 4.Props

| Prop | Type | Default | Description | Required | |------|------|---------|-------------|----------| | success | boolean | true | Switch display or hidden modal | yes | closeModal | function | closeModal | Setter function for display Modal | yes | newUser | object | {firstName:"John",lastName:"Doe"} | Exemple of data to display | yes

You can create a special Data file like mock.json & use in React component like newUser={mock[index]}(or get some Data from APIs, DBs...)

Exemple

# create a local json data file
touch mock.json

  import mock from './mock.json';

  // Display First row of data (mock[0])
  return (
    <Modal 
      success={visibleModal} 
      closeModal={() => {closeModal()}} 
      newUser={mock[0]}
    />
  )

📖 License

MIT