React-fusionui NPM

React FusionUI ☢️

npm bundle size

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