0.2.0 ā¢ Published 1 year ago
react-sweetify v0.2.0
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-sweetifyyarn
yarn add react-sweetifypnpm
pnpm install react-sweetifyUsage
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 | smmdlgxl | 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:
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:
For example:
<Sweetify
options={{
width: "sm"
}}
>
<h1>Hello World</h1>
</Sweetify>