open-index/open-npm huggingface dataset:
npm package: @patrice-h/custom-modal
Description: Customized modal for OpenClassrooms project
Author: Patrice-H
Latest version: 2.1.0

# @patrice-h/custom-modal

> Customized modal for OpenClassrooms project made with create-react-library

[![NPM](https://img.shields.io/npm/v/@patrice-h/custom-modal.svg)](https://www.npmjs.com/package/@patrice-h/custom-modal) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @patrice-h/custom-modal
```

## Usage

```jsx
import React, { useState } from 'react'
import MyComponent from '@patrice-h/my-modal'

export const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)

  const displayModal = () => {
    setIsModalOpen(true)
  }
  const hideModal = () => {
    setIsModalOpen(false)
  }

  return(
    <div>
      <button onClick={displayModal}>Open Modal</button>
      <MyComponent isOpen={isModalOpen} text="My text" hideModal={hideModal} >
    </div>
  )
}
```

## Stylization (example)

```css
#modal-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-content {
  vertical-align: middle;
  position: relative;
  max-width: 500px;
  width: 90%;
  height: max-content;
  background: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
  text-align: left;
}
#modal-text {
  color: red;
}
#close-modal-btn {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
#modal-container.hidden-modal {
  display: none;
}
```

## License

MIT © [Patrice-H](https://github.com/Patrice-H)
npm package: @patrice-h/customized-modal
Description: Customized modal for OpenClassrooms project
Author: Patrice-H
Latest version: 1.4.0

# @patrice-h/my-modal

> Made with create-react-library

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

## Install

```bash
npm install --save @patrice-h/my-modal
```

## Usage

```jsx
import React, { useState } from 'react'
import MyComponent from '@patrice-h/my-modal'

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)

  const displayModal = () => {
    setIsModalOpen(true)
  }
  const hideModal = () => {
    setIsModalOpen(false)
  }

  return(
    <div>
      <button onClick={displayModal}>Open Modal</button>
      <MyComponent isOpen={isModalOpen} text="My text" hideModal={hideModal} >
    </div>
  )
}
```

## Stylization (example)

```css
#modal-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-content {
  vertical-align: middle;
  position: relative;
  max-width: 500px;
  width: 90%;
  height: max-content;
  background: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
  text-align: left;
}
#modal-text {
  color: red;
}
#close-modal-btn {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.hidden-modal {
  display: none;
}
```

## License

MIT © [Patrice-H](https://github.com/Patrice-H)
npm package: @patrice-h/my-modal
Description: Made with create-react-library
Author: Patrice-H
Latest version: 1.0.0

# @patrice-h/my-modal

> Made with create-react-library

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

## Install

```bash
npm install --save @patrice-h/my-modal
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from '@patrice-h/my-modal'
import '@patrice-h/my-modal/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [Patrice-H](https://github.com/Patrice-H)
npm package: @patrice-h/testreactcomponent
Description: Made with create-react-library
Author: Patrice-H
Latest version: 1.3.0

# @patrice-h/testreactcomponent

> Made with create-react-library

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

## Install

```bash
npm install --save @patrice-h/testreactcomponent
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from '@patrice-h/testreactcomponent'
import '@patrice-h/testreactcomponent/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [Patrice-H](https://github.com/Patrice-H)