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.
$ npm install --save react-functional-modal
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 nothingIf 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();
...
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>
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)"
}
})
});
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>
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);
},
});
});
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>ReactNode:
React element. e.g. <div>...</div>, <SomeComponent />, <>...</>
Option (optional):
See Option
return: void
string (optional):
Key of the modal to hide. if not provided, hide modals in order from recent to old.
return: void
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) |
display: flex;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0);
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:
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.
As our modal rendered in separated context, it has no access to context object such as ReduxStore, React-Router Context, ThemeContext.
- 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]);
...- 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]);
...MIT