react-sweetify

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.

Installation

npm

npm install react-sweetify

yarn

yarn add react-sweetify

pnpm

pnpm install react-sweetify

Usage

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	sm md lg xl		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:

• top-right
• bottom-right
• top-left
• bottom-left
• middle-center

For example:

<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:

• sm
• md
• lg
• xl

For example:

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