# react-sweetify

> react-sweetify is a React-based library for creating customizable modals within your web applications

Latest version **0.2.0** (published 2023-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-sweetify
pnpm add react-sweetify
yarn add react-sweetify
bun add react-sweetify
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-02-23 |
| First published | 2023-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 47 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | elhussary |
| Maintainers | elhussary |
| Keywords | react, reactjs, react-component, modal, dialog, sweetify, react-sweetify |

## Links

- npm: https://www.npmjs.com/package/react-sweetify
- Repository: https://github.com/elhussary/react-sweetify
- Issues: https://github.com/elhussary/react-sweetify/issues
- npm.io page: https://npm.io/package/react-sweetify

## 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.0 (latest) — 2023-02-23
- 0.1.0 — 2023-02-23

## README

# React-Sweetify

React-Sweetify is a lightweight and customizable modal library built for React applications. It allows you to create modals and pop-ups easily and quickly with flexible options for customization.

## <a name="installation"/>Installation
npm
```shell
npm install react-sweetify
```
yarn
```shell
yarn add react-sweetify
```
pnpm
```shell
pnpm install react-sweetify
```

## <a name="usage"/>Usage


```jsx
import React from 'react';
import Sweetify from 'react-sweetify';

function App() {
  return (
    <Sweetify>
      <h1>Hello World!</h1>
    </Sweetify>
  );
}
```

## Available props
👇

| Name                      | Type      | Default      | Description                                                                                         |
|---------------------------|-----------| ------------ |-----------------------------------------------------------------------------------------------------|
| `buttonText`      | string    |       Open Modal      | This is the text that appears on the button that opens the modal                                                        |
| `className`        | string     |                     | Add a className to the component content.                                                   |
|`fullscreenBelow`      | <ul><li><code>sm</code></li><li><code>md</code></li><li><code>lg</code></li><li><code>xl</code></li></ul>    |              | Breakpoint below which the modal will take up the full screen.
| `options`           | object    |      | This is an object containing additional options for the modal, including the position of the modal on the screen and the width of the modal content. 
 
 ## Frequently Asked Questions
### 👉 How do I change the position of the modal?

To change the position of the modal, you can use the options prop and set the position property to one of the following values:

<ul><li><code>top-right</code></li><li><code>bottom-right</code></li><li><code>top-left</code></li><li><code>bottom-left</code></li><li><code>middle-center</code></li></ul>

For example:
```jsx
<Sweetify
  options={{
    position: "middle-center"
  }}
>
  <h1>Hello World</h1>
</Sweetify>
```
### 👉 How do I change the width of the modal?

To change the width of the modal, you can use the options prop and set the width property to one of the following values:

<ul><li><code>sm</code></li><li><code>md</code></li><li><code>lg</code></li><li><code>xl</code></li></ul>

For example:
```jsx

<Sweetify
  options={{
    width: "sm"
  }}
>
  <h1>Hello World</h1>
</Sweetify>
```

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