Skip to content

saehun/react-functional-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo

React Functional Modal

version downloads

Modal component doesn't needs to be mounted
Call functions show, hide with arguments ReactNode and few options


  • Simple: Only have 2 API. show and hide.
  • Functional: Let library manages the state. Just call the function.
  • Flexible: No restriction for how the modal to be shaped.
  • Typed: Built with typescript.
  • Small: 160 lines, ~1.8Kb gzipped. no deps.

Install

$ npm install --save react-functional-modal

How is it different?

comparison

Usage

Simply Call the function show with react element(jsx):

show(<div>{/* contents */}</div>);

And hide it:

hide();

If you want modals to be overlapped, do it:

show(<ModalOne />);
show(<ModalTwo />);

hide function closes recently opened modal:

hide(); // hide ModalTwo
hide(); // hide ModalOne
hide(); // do nothing

If you specified the key, you can explicitly close it:

show(<Modal />, { key: "1234" });
hide("1234");

When you need fade-in, fade-out animation, there is a option:

show(<Modal />, {
  fading: true,
  clickOutsideToClose: true,
});

You can override overlay style:

show(<Modal />, {
  style: {
    justifyContent: "flex-start"     // Modal is placed left side of the page.
    background: "rgba(0, 0, 0, 0.1)" // Darken overlay background color.
  }
});

Provide onClose callback:

show(<Modal />, {
  onClose: () => { /* called when the modal closed */ }
});

hide(key, ...args) function pass the arguments to onClose(...args) callback:

show(<Modal />, {
  key: "1234" // required
  onClose: (value1, value2) => { console.log(value1, value2) } // Hello World!
});

hide("1234", "Hello", "World!");

You can promisify the modal

const getValue = new Promise((resolve) => {
  show(<Modal someHandler={(value) => hide("1234", value)} />, {
    key: "1234" // required
    onClose: (value) => { resolve(value); }
  });
});

// inside some async function
...
const value = await getValue();
...

Advanced

Message

message

const Message = ({ duration, title }) => {
  const [remain, setRemain] = React.useState(duration / 1000);

  React.useEffect(() => {
    const interval = setInterval(() => { setRemain(remain => remain - 1) }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div style={wrapperStyle}>
    <h3 style={{ whiteSpace: "pre" }}>{title}</h3>
    <p>{`closed after ${remain}seconds..`}</p>
  </div>;
};

const message = (title, duration) => {
  setTimeout(() => { hide("alert") }, duration);
  show(<Message title={title} duration={duration} />, {
    key: "alert",
    fading: true,
    style: { background: "rgba(27, 28, 37, 0.03)" }
  });
}

...

<button onClick={() => message(
  `You have no test.
Successfully deployed to production.

Have a nice weekend.`,
  3000,
)}>
  show message modal
</button>

Confirm

confirm

const confirm = () => new Promise((resolve) => {
  show(<div style={wrapperStyle}>
    <p>Are you sure to send this message to your ex at 3AM?</p>
    <div style={{ textAlign: "right" }}>
      <button onClick={() => hide("confirm", true)} style={{ marginRight: "8px" }}>
        OK
    </button>
      <button onClick={() => hide("confirm", false)}>
        CANCEL
    </button>
    </div>
  </div>, {
    key: "confirm",
    fading: true,
    onClose: (result) => {
      resolve(result);
    },
    style: {
      background: "rgba(27, 28, 37, 0.08)"
    }
  })
});

Select

select

const select = (title, options) => new Promise((resolve) => {
  show(<div style={wrapperStyle}>
    <h3>{title}</h3>
    <select
      value={options[0].toLowerCase()}
      onChange={(e) => { e.persist(); hide("select", e.target.value) }}>
      {options.map((o, i) => {
        return <option key={i} value={o.toLowerCase()}>{o}</option>
      })}
    </select>
  </div>, {
    key: "select",
    fading: true,
    style: { background: "rgba(27, 28, 37, 0.08)" },
    onClose: (value) => {
      resolve(value);
    },
  })
});

...

<button onClick={async () => {
  const result = await select("What is your favorite language?", [
    "Javscript", "Typescript", "Python", "Go", "C/C++",
  ]);
  console.log(result);
}}>
  show select modal
</button>

Form

form

const Form = () => {
  const [values, setValues] = React.useState({ name: "", email: "", phone: "" });
  const onChange = React.useCallback((property) => (e) => {
    e.persist();
    setValues((prev) => ({ ...prev, [property]: e.target.value }));
  }, [setValues]);

  return <form style={wrapperStyle}>
    <h3>GET FREE CHICKEN!</h3>
    <InputGroup property="name" onChange={onChange} value={values.name} />
    <InputGroup property="email" onChange={onChange} value={values.email} />
    <InputGroup property="phone" onChange={onChange} value={values.phone} />
    <div style={{ textAlign: "center" }}>
      <button onClick={() => hide("form", undefined)} style={{ marginRight: "8px" }}>
        CANCEL
      </button>
      <button onClick={() => hide("form", values)}>
        SUBMIT
      </button>
    </div>
  </form>
};

const form = () => new Promise((resolve, reject) => {
  show(<Form />, {
    key: "form",
    fading: true,
    style: { background: "rgba(27, 28, 37, 0.08)" },
    onClose: (v) => {
      if (!v) reject();
      resolve(v);
    },
  });
});

Step

step

const step = (title, contents, index = 0) => {
  if (index === contents.length || index < 0) return hide("step");

  show(<div style={wrapperStyle}>
    <h3 style={{ textAlign: "center" }}>{title}</h3>
    <p>{contents[index]}</p>
    <div style={{ textAlign: "center" }}>
      <button onClick={() => step(title, contents, index - 1)} style={{ marginRight: "8px" }}>
        PREV
      </button>
      <button onClick={() => step(title, contents, index + 1)}>
        NEXT
      </button>
    </div>
  </div>,
    { key: "step", fading: true, style: { background: "rgba(27, 28, 37, 0.08)" } });
}

...

<button onClick={() => step(
  "How to debug code", [
  "1. Make sure the code is saved",
  "2. Reinstall node_modules",
  "3. Restart your computer",
])}>
  show step modal
</button>

API

show(ReactNode, Option)

ReactNode:
React element. e.g. <div>...</div>, <SomeComponent />, <>...</>

Option (optional):
See Option

return: void

hide(string)

string (optional):
Key of the modal to hide. if not provided, hide modals in order from recent to old.

return: void

Option

All properties follow are optional.

Key Type Description
key string Unique key of modal. if ommited incremental number is assigned.
onClose function callback when hide function called
style object CSS properties object which will overrides the modal's overlay
fading boolean enable fadeIn and fadeOut (default false)
clickOutsideToClose boolean click overlay to close the modal (default false)

Default overlay styles

display: flex;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0);

How it works

Every React element must be mounted somewhere in vdom tree. No react component can be rendered outside of the flow. In this point of view, package react-functional-modal have no sense. because it doesn't be mounted but called with argument.

Where is the React element given as first argument of show function mounted?
The answer is another tree:
how it works

As the function show called, it creates HTML div element and appends it as a child of document's body. New ReactDOM.render API called with the HTML div element as a container, given react element wrapped by overlay as a root.

When the function hide called, ReactDOM.unmountComponentAtNode and document.body.removeChild API detroy and clear the modal.

Restriction

As our modal rendered in separated context, it has no access to context object such as ReduxStore, React-Router Context, ThemeContext.

Solution

  1. Wrap modal with context providers:
import { Provider, useStore } from "react-redux";
...
// somewhere in react component
...
  const store = useStore();
  const openModal = useCallback(() => {
    show(
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Modal />
        </Provider>
      </ThemeProvider>
    );
  }, [store, theme]);
...
  1. Pass functions directly (callback with closure)
...
// somewhere in react component
...
  const updateSomething = useCallback((value) => {
    dispatch(actions.updateSomething(value));
  }, [dispatch]);

  const openModal = useCallback(() => {
    show(<Modal handler={updateSomething} />);
  }, [updateSomething]);
...

License

MIT