open-index/open-npm huggingface dataset:
npm package: @matthieumelin/mm-react-modal
Description: A simple plugin for create modal.
Author: Matthieu Melin
Latest version: 2.7.0

# React Modal Plugin

A simple plugin for create modal for React.js

## Features

- Custom style on components
- Dynamic display control

# Get started

**Requirements**
- React 18.2.0+

**Installation**
- Using npm `npm install @matthieumelin/mm-react-modal`
- Using yarn `yarn add @matthieumelin/mm-react-modal`

**Usage**
- ``isOpen`` (boolean): variable controlling the display of the modal
- ``message`` (string): custom message written on the modal
- ``onConfirm`` (function): action triggered when clicking on the 'closed' icon (& triggered on clicking outside the modal if no action is provided for this action).
- ``customModal`` (object): custom background of the modal
- ``customCloseButton`` (object): custom style of the close button
- ``customMessage`` (object): custom style of the message written on the modal
- ``customContainer`` (object): custom style of the modal
- ``onClickOutside`` (function): action triggered when clicking outside the modal

*App.js (default)*
```javascript
import React, { useState } from "react";
import Modal from "@matthieumelin/mm-react-modal";

const App = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <div className="App">
      <div onClick={() => setModalIsOpen(!modalIsOpen)}>
        Click here to open modal
      </div>

      <Modal
      message={"Employeee Created!"}
      isOpen={modalIsOpen} 
      onConfirm={toggleModal}/>
    </div>
  );
}
export default App;
```

*App.js (with custom style)*
```javascript
import React, { useState } from "react";
import Modal from "@matthieumelin/mm-react-modal";

const App = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <div className="App">
      <div onClick={() => setModalIsOpen(!modalIsOpen)}>
        Click here to open modal
      </div>

      <Modal customCloseButton={{
        position: "absolute",
        right: -10,
        top: -10,
        width: 15,
        height: 15,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: 15,
        borderRadius: 100,
      }}
      customMessage={{ textAlign: "center", width: "100%" }}
      customContainer={{ position: "relative", height: 50, width: 400 }}
      message={"Employeee Created!"}
      isOpen={modalIsOpen} 
      onConfirm={toggleModal}/>
    </div>
  );
}
export default App;
```
npm package: @matthieumelin/mm-react-table
Description: A simple plugin for create table.
Author: Matthieu Melin
Latest version: 3.3.0

# React Table Plugin

A simple plugin for create table for React.js

# Get started

**Requirements**

- React 18.2.0+

**Installation**

- Using npm `npm install @matthieumelin/mm-react-table`
- Using yarn `yarn add @matthieumelin/mm-react-table`

**Usage**

- `datas` (array): a data list
- `attibutes` (array): a list of attributes

_App.js (default)_

```javascript
import React, { useState } from "react";
import Table from "@matthieumelin/mm-react-table";

const App = () => {
  const attributes = [
    {
      name: "First Name",
      value: "firstName",
    },
    {
      name: "Last Name",
      value: "lastName",
    },
    {
      name: "Start Date",
      value: "startDate",
    },
    {
      name: "Department",
      value: "department",
    },
    {
      name: "Date of Birth",
      value: "dateOfBirth",
    },
    {
      name: "Street",
      value: "street",
    },
    {
      name: "City",
      value: "city",
    },
    {
      name: "State",
      value: "state",
    },
    {
      name: "Zip Code",
      value: "zipCode",
    },
  ];
  const [datas, setDatas] = useState([
    {
      id: 1,
      firstName: "Kenneth",
      lastName: "Langenfeld",
      startDate: "2021-04-12",
      department: "Legal",
      dateOfBirth: "1999-06-20",
      street: "561 Edgewood Avenue",
      city: "Fresno",
      state: "CA",
      zipCode: "93704",
    },
    {
      id: 2,
      firstName: "James",
      lastName: "Maclean",
      startDate: "2018-02-30",
      department: "Sales",
      dateOfBirth: "1961-07-13",
      street: "2633 Freshour Circle",
      city: "San Antonio",
      state: "TX",
      zipCode: "78238",
    },
  ]);
  return (
    <div className="App">
      <Table datas={datas} attributes={attributes} />
    </div>
  );
};
export default App;
```