React FusionUI ☢️
Open modals and dialogs with ease!
Demo with Examples
ozanbolel.github.io/react-fusionui
Installation
# npm
npm i react-fusionui
# yarn
yarn add react-fusionuiBasic Usage
import React from "react";
import { FusionContainer, useModal } from "react-fusionui";
const Modal = ({ isAnimationDone, isClosing, closeModal }) => {
return <h2>Modal</h2>;
};
const Home = () => {
const modal = useModal();
return <button onClick={() => modal(Modal)}>Open Modal</button>;
};
const MyApp = () => {
return (
<FusionContainer>
<Home />
</FusionContainer>
);
};
export default MyApp;You need to wrap your app within
FusionContainer.
FusionUI passes
isAnimationDone,isClosingandcloseModalprops to your modal component.
Theming
import React from "react";
import { FusionContainer } from "react-fusionui";
import css from "./App.module.css";
const MyApp = () => {
return (
<FusionContainer
modalClassNames={{
container: css.container,
modal: css.modal
}}
dialogClassNames={{
container: css.container,
dialog: css.dialog,
content: css.content,
actionContainer: css.actionContainer,
action: css.action,
actionLabel: css.actionLabel,
highlight: css.highlight
}}
>
...
</FusionContainer>
);
};
export default MyApp;API
useModal
Args
| Arg | Description | Type | Required |
|---|---|---|---|
Component |
Component you want to render inside the modal. | FunctionalComponent | YES |
config |
Modal configuration. | Object |
Config Object
| Name | Description | Type | Required |
|---|---|---|---|
props |
Props you want to pass to the component you specified. | Object | |
autoclose |
Should your component close when user clicks outside of your modal. | Boolean |
useDialog
Args
| Arg | Description | Type | Required |
|---|---|---|---|
content |
Content of the dialog. | ReactNode | YES |
actions |
Actions which will be rendered as buttons. | Array | YES |
config |
Dialog configuration. | Object |
Action Object
| Name | Description | Type | Required |
|---|---|---|---|
label |
Label of the button. | String | YES |
callback |
Will run when the button is clicked. | Function | |
highlight |
Apply highlight styles to the button. | Boolean |
Config Object
| Name | Description | Type | Required |
|---|---|---|---|
autoclose |
Should the dialog close when user clicks outside of the dialog. | Boolean |