react-modal-manager

A cool modal manager for react.

installation

npm install -S @jswork/react-modal-manager

usage

1. import css

@import "~@jswork/react-modal-manager/dist/style.css";

// or use sass
@import "~@jswork/react-modal-manager/dist/style.scss";

// customize your styles:
$react-modal-manager-options: ()

2. import js

import React from 'react';
import ReactModalManager from '@jswork/react-modal-manager';
import styled from 'styled-components';
import viteRequireContext from '@jswork/vite-require-context';
import '@jswork/next';

const Container = styled.div`
  width: 80%;
  margin: 30px auto 0;
`;

const moduleFiles = import.meta.globEager('./modals/*.jsx');
const context = viteRequireContext(moduleFiles);

export default () => {
  return (
    <Container>
      <ReactModalManager
        context={context}
        inject={(e) => {
          nx.$modal = e;
        }}>
        <button
          onClick={() => {
            nx.$modal.present('modal1');
          }}>
          MyModal
        </button>
      </ReactModalManager>
    </Container>
  );
};

preview

• https://afeiship.github.io/react-modal-manager/

license

Code released under the MIT license.