react-fusionui

React FusionUI ☢️

Open modals and dialogs with ease! 🚀 FusionUI is an unopinionated and minimalist library to power-up your UI.

Demo with Examples

ozanbolel.github.io/react-fusionui

Installation

# npm
npm i react-fusionui

# yarn
yarn add react-fusionui

Basic 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, isClosing and closeModal props 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

License

MIT