No description
  • TypeScript 100%
Find a file
2020-04-06 13:33:49 +10:00
.github/workflows Updates... 2020-04-06 10:34:46 +10:00
src Use portals for the modal 2020-04-06 13:33:41 +10:00
.gitignore Use portals for the modal 2020-04-06 13:33:41 +10:00
index.d.ts initial commit 2020-04-06 09:23:14 +10:00
package-lock.json 1.2.0 2020-04-06 13:33:49 +10:00
package.json 1.2.0 2020-04-06 13:33:49 +10:00
README.md Flesh out readme, add support for custom overlay colours 2020-04-06 12:35:27 +10:00
tsconfig.json initial commit 2020-04-06 09:23:14 +10:00

React TreeModal

Very simple modal utility component. Handles common use cases like:

  • Centered, then scrolls when content is too long
  • Escape to close
  • Click overlay to close

Sample Usage:

import TreeModal from "@treetrum/react-treemodal";

const Modal = () => {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <TreeModal
            isOpen={isOpen}
            onClose={() => {
                setIsOpen(false);
            }}
        >
            <h1>Modal Title</h1>
            <p>
                Aliquam diam augue, hendrerit vitae orci quis, suscipit
                condimentum mi...
            </p>
        </TreeModal>
    );
};

Exported Components

TreeModal - Default Export

Props

Prop Name Required Type Default Value
isOpen true boolean null
children true React.Children null
onClose true () => void null
overlayColor false string rgba(0, 0, 0, 0.5)