1.9.0 • Published 3 years ago

react-simple-modal-provider v1.9.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

react-simple-modal-provider

Simple Modal Manager for React Projects

react-simple-modal-provider-144

Contents

Demo

⭐️ Codesandbox

Installation

$ npm install react-simple-modal-provider
$ yarn add react-simple-modal-provider

Examples

// BasicModal Component
import Modal, { useModalState } from "react-simple-modal-provider";

export default ({ children }) => {
  const [isOpen, setOpen] = useModalState();
  /* const onCloseHandler = () => setOpen(false); */

  return (
    <Modal
      id={"BasicModal"}
      consumer={children}
      isOpen={isOpen}
      setOpen={setOpen}
    >
      <span>😆</span>
    </Modal>
  );
};

Pass unique ID to the id props. It is, then, used to load modals. Keeping eye on the four required props of the "Modal" module, you should create a modal in the child area.

// App Component
import { ModalProvider } from "react-simple-modal-provider";
import BasicModal from "./BasicModal";
import ConsumePage from "./ConsumePage";

export default () => {
  return (
    <ModalProvider value={[BasicModal, ...]}>
      <ConsumePage />
      <ConsumePage />
      ...
    </ModalProvider>
  );
};

Register a modal array through the "value" props of the "ModalProvider" module and wrap it around the application.

// ConsumePage Component
import { useModal } from "react-simple-modal-provider";

export default () => {
  const { open: openModal } = useModal("BasicModal");

  return <button onClick={openModal}>Open</button>;
};

"useModal" takes the modal ID as an argument and provides the open, close function of the modal. It is recommended to name variables using destructuring assignment.

API

Modal Module

- Required props

PropTypeDefaultDescription
idstring-Identifier for a modal
consumerchildren props-Components to use modals for
isOpenboolean state-Returned by useModalState hooks
setOpenstate function-Returned by useModalState hooks

- Optional props

PropTypeDefaultDescription
asyncOpenasync function-Called when modal opened
draggablebooleanfalseDrag usable
allowClickOutsidebooleantrueAllow click outside
spinnerfalse | JSXBuilt-in spinnerAsync loading spinner
spinnerColorstringrgba(45, 52, 54, 0.6)Built-in spinner color
overlayColorstringrgba(0, 0, 0, 0.6)Overlay color
backgroundColorstringtransparentModal background color
animationobject-Open/Close animation
durationnumber0Animation duration
verticalnumber0Vertical position (px)
horizontalnumber0Horizontal position (px)
widthnumber0Modal width (px)
heightnumber0Modal height (px)
radiusnumber0Border radius (px)

Async

// AsyncModal Component
import { useState } from "react";
import Modal, { useModalState } from "react-simple-modal-provider";
import ModalBody from "./ModalBody";

export default ({ children }) => {
  const [isOpen, setOpen] = useModalState();
  const [data, setData] = useState(null);

  const asyncOpen = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const json = await response.json();
    setData(json);
  };

  return (
    <Modal
      id={"AsyncModal"}
      consumer={children}
      isOpen={isOpen}
      setOpen={setOpen}
      asyncOpen={asyncOpen}
    >
      <ModalBody data={data} />
    </Modal>
  );
};
// ModalBody Component
export default ({ data }) => {
  return <h1>{data.title}</h1>;
};

A spinner is built-in. If you don't want to, specify false in "spinner" props. Custom spinners in "JSX" format can also be specified.

Animation

- Built-in animation

  • Import "modalAnimation" module and pass the value to the animation props.
    • scaleUp
    • slideDown
    • slideUp
import Modal, { modalAnimation } from "react-simple-modal-provider";

export default ({ children }) => {
  return (
    <Modal animation={modalAnimation.scaleUp}>
      ...
    </Modal>
  );
};

- Custom animation examples

top, bottom, left, right type cannot be used.

{
  type: "transform, opacity",
  base: "transform: translateY(-50px); opacity: 0;",
  before: "transform: translateY(50px); opacity: 0;",
  after: "transform: translateY(0px); opacity: 1;",
}
{
  type: "transform, opacity",
  base: "transform: rotate(0deg) scale(0.3); opacity: 0;",
  before: "transform: rotate(0deg) scale(0.3); opacity: 0;",
  after: "transform: rotate(360deg) scale(1); opacity: 1;"
}

ETC

- useModalProps (forward props when opening modals)

// ConsumePage Component
import { useModal } from "react-simple-modal-provider";

export default () => {
  const { open } = useModal("ETCModal");

  return <button onClick={() => open({ title: "Hello World" })}>Open</button>;
};
// ModalBody Component
import { useModalProps } from "react-simple-modal-provider";

export default () => {
  const { title } = useModalProps("ETCModal");

  return <h1>{title}</h1>;  // Hello World
};

- Provider overlap (differentiate global / local modal)

// App Component
import { ModalProvider } from "react-simple-modal-provider";

import GlobalModal from "./GlobalModal";
import GlobalConsumePage from "./GlobalConsumePage";

import LocalModal from "./LocalModal";
import LocalConsumePage from "./LocalConsumePage";

export default () => {
  return (
    <ModalProvider value={[GlobalModal, ...]}>
      {/* Available Modals: GlobalModal */}
      <GlobalConsumePage />
      <GlobalConsumePage />
      ...

      <ModalProvider value={[LocalModal, ...]}>
        {/* Available Modals: GlobalModal, LocalModal */}
        <LocalConsumePage />
        <LocalConsumePage />
        ...
      </ModalProvider>
    </ModalProvider>
  );
};

Top

GithubNPM

1.9.0

3 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.4

4 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.4

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.6

4 years ago

1.5.5

4 years ago

1.5.4

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.6

4 years ago

1.4.5

4 years ago

1.4.4

4 years ago

1.4.3

4 years ago

1.4.2

4 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.10

4 years ago

1.3.9

4 years ago

1.3.8

4 years ago

1.3.7

4 years ago

1.3.6

4 years ago

1.3.5

4 years ago

1.3.4

4 years ago

1.3.3

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.21

4 years ago

1.1.2

4 years ago

1.1.11

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.41

4 years ago

1.0.4

4 years ago

1.0.31

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

1.0.0

4 years ago