# react-easy-modale

> A modale easy to use with custom options

Latest version **0.2.1** (published 2023-02-19) · 0 weekly downloads

## Install

```sh
npm install react-easy-modale
pnpm add react-easy-modale
yarn add react-easy-modale
bun add react-easy-modale
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2023-02-19 |
| First published | 2023-01-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 45.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | qenxzin |
| Maintainers | qenxzin |
| Keywords | react, components, modale |

## Links

- npm: https://www.npmjs.com/package/react-easy-modale
- npm.io page: https://npm.io/package/react-easy-modale

## Dependencies (4)

- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2023-02-19
- 0.1.1 — 2023-01-19
- 0.1.0 — 2023-01-19

## README

# React easy modale

## Description

react-easy-modale is a simple React component that allows you to add a customizable modal window to your React application.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)

## Installation

To install React Easy Modale in your project, you can use NPM:

```
npm i react-easy-modale

```

## Usage

To use EasyModale in your React project, you need to import it into your component and use it as a regular React component. Here's an example:

```

import EasyModale from "react-easy-modale/dist/components/EasyModale";
import { useState } from "react";


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

  const showModal = () => {
    setIsModalOpen(true);
  };

  const hideModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={showModal}>Show Modal</button>
      <EasyModale
        isOpen={isModalOpen}
        closeModal={hideModal}
        text="This is the modal content."
      />
    </div>
  );
}


```

In the example above, we're importing the EasyModale component from the easymodale module, and using it inside a parent component. The isOpen prop determines whether the modal is visible or hidden, and the closeModal function is used to hide the modal when the user clicks on the close button.

You can customize the appearance and behavior of the modal by passing additional props to the EasyModale component. Here are some of the available props:

## Customizable properties

The following properties can be used to customize the EasyModale component:

- `isOpen` (boolean): Determines whether the modal is currently open or not.

- `closeModal` (function): A callback function that is executed when the user clicks on the close button.

- `text` (string): The text to be displayed inside the modal.

- `animated1` (boolean): Determines whether the text inside the modal should be animated to appear.

- `animated2` (boolean): Determines whether the text inside the modal should be animated as if it is being typed.

- `animated3` (boolean): Determines whether the text inside the modal should be animated to scroll from left to right.

- `modalBackgroundColor` (string): The background color of the modal.

- `modalBorder` (string): The CSS border property of the modal.

- `modalBorderRadius` (string): The CSS border-radius property of the modal.

- `modalPadding` (string): The padding inside the modal.

- `modalWidth` (string): The width of the modal.

- `modalHeight` (string): The height of the modal.

- `modaleStyle` (object): An object containing additional styles to be applied to the modal.

- `textColor` (string): The color of the text inside the modal.

- `fontFamily` (string): The font family of the text inside the modal.

- `fontSize` (string): The font size of the text inside the modal.

- `fontWeight` (string): The font weight of the text inside the modal.

- `lineHeight` (string): The line height of the text inside the modal.

- `textStyle` (object): An object containing additional styles to be applied to the text inside the modal.

## Contributing

Not yet available

## License

Not yet avalaible

Conclusion
With ReactEasyModale, you can easily create customizable and animated modals for your React project. Just import the EasyModale component and use it as a regular React component with your preferred props.

---
_Source: https://npm.io/package/react-easy-modale · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._