react-easy-modal

Table

• Installation

• Examples

• Customization

• About

• Demos

Installation

To install, you can use npm or yarn:

• npm install or yarn add .

  $ npm install react-easy-modal
  $ yarn add react-easy-modal

Example

Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:

Basic

import { Dialog, Button, Flex } from "react-easy-modal";

Use as a component:

<div>
  <Dialog.Root>
    <Dialog.Trigger>
      <Button
        variant="solid"
        textColor="rgb(251, 251, 251)"
        bgColor="rgb(47, 46, 46)"
      >
        Open Modal
      </Button>
    </Dialog.Trigger>
    <Dialog.Content position={"slide-up"}>
      <Dialog.Title>Opened Modal</Dialog.Title>
      <Dialog.Description>Lorem ipsum dolor, sit amet</Dialog.Description>
      <Flex gap="20px" mt="60px" justify="end">
        <Dialog.Cancel>
          <Button variant="soft">Cancel</Button>
        </Dialog.Cancel>

        <Dialog.Action onAction={handleFunction}>
          <Button variant="solid" bgColor="rgb(30, 75, 210">
            Do something
          </Button>
        </Dialog.Action>
      </Flex>
    </Dialog.Content>
  </Dialog.Root>
</div>

Props

The Flex component accepts the following props:

• gap (string, optional): Gap between child elements within the flex container.

• mt (string, optional): Top margin for the flex container.

• justify (string, optional): Horizontal alignment of child elements within the flex container.

The Content component accepts the following props:

• position (string, optional): Position of the dialog content (either 'default' or custom).

The Button component accepts the following props:

• textColor (string, optional): Text color of the button.
• variant (string, optional): Button style, which can be 'solid', 'soft', or any other value.
• bgColor (string, optional): Background color of the button.

Customization Options

Here are the customization options for the modal:

Adjust Gap Between Child Elements:

• To change the gap between child elements within the flex container, use the gap prop.

• You can specify the desired gap as a string value.

Set Top Margin:

• Modify the top margin of the flex container by using the mt prop.

• Provide the desired margin value as a string.

Horizontal Alignment of Child Elements:

• Customize the horizontal alignment of child elements within the flex container by setting the justify prop.
• You can choose from options like 'flex-start', 'center', 'flex-end', or any other valid alignment value.

Change Animation Position:

• The modal provides animation options for sliding up , sliding down and fade In.

• You can set the animation position by specifying the position prop when rendering the Content component. Choose either 'slide-up','slide-down', 'full-screen' based on your preference.

Button Text and Style:

• Change the text displayed on the button by providing content as the component's children.

• Adjust the text color and background color of the button by using the textColor and bgColor props, respectively.

Button Style Variant:

• Customize the button's style by setting the variant prop to either 'solid' or 'soft' for different border radius styles.

• You can also specify any other value to create a different style.

Additional Style Changes

• For more extensive style changes within the components, you can modify the CSS styles directly in your code where they are defined.

• Look for the styles associated with each component and make adjustments as needed to achieve your desired appearance and behavior.

Demos

import {Dialog, Button, Flex} from 'react-easy-modal'

const Sample = () => {
  const handleFunction = () => {
    alert("You did something!");
  };

  return (
    <div style={{ padding: "20px" }}>
      <Dialog.Root>
        <Dialog.Trigger>
          {/*  you can control Button (variant = soft or solid) */}
          <Button
            variant="solid"
            textColor="rgb(251, 251, 251)"
            bgColor="rgb(47, 46, 46)"
          >
            Open Modal
          </Button>
        </Dialog.Trigger>

        {/*  you can control  (full-screen or slide-up/down ) */}
        <Dialog.Content position={"slide-up"}>
          <Dialog.Title>Opened Modal</Dialog.Title>

          <Dialog.Description>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde eum,
            delectus adipisci ducimus.
          </Dialog.Description>

          {/*  you can control flex */}
          <Flex gap="20px" mt="60px" justify="end">
            <Dialog.Cancel>
              <Button variant="soft">Cancel</Button>
            </Dialog.Cancel>

            <Dialog.Action onAction={handleFunction}>
              <Button variant="solid" bgColor="rgb(30, 75, 210)">
                Do something
              </Button>
            </Dialog.Action>
          </Flex>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  );
};

export default Sample;

Contributors

Thanks goes to these wonderful people.......