Merge pull request #3 from mbrookson/feature/purge-unused-css

Improve bundle size and fix max-height bug

Author: mbrookson

example/.gitignore

@@ -0,0 +1 @@
+styles.css

example/.npmignore

@@ -1,3 +1,3 @@
 node_modules
 .cache
-dist
+dist

example/index.tsx

@@ -3,15 +3,17 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ModalProvider, Modal, useModal } from '../dist/index';
 import '../dist/styles.css';
+import './styles.css';
 
 const ModalContent = ({ onCloseClicked }) => {
   const { isModalOpen, openModal, closeModal } = useModal();
+  const [toggle, setToggle] = React.useState(false);
 
   return (
     <>
       <div>This modal can be closed by clicking the close button below.</div>
       <button
-        className="rsm-p-3 rsm-bg-red-500 rsm-text-white rsm-rounded rsm-mt-4 rsm-mr-4"
+        className="p-3 bg-red-500 text-white rounded mt-4 mr-4"
         onClick={onCloseClicked}
       >
         Close this modal
@@ -22,16 +24,34 @@ const ModalContent = ({ onCloseClicked }) => {
         isOpen={isModalOpen}
         onBackdropClick={closeModal}
       />
-      <div className="rsm-mt-8">
+      <div className="mt-8">
         Open another modal which will appear stacked on top of the current
         modal.
       </div>
       <button
-        className="rsm-p-3 rsm-bg-blue-500 rsm-text-white rsm-rounded rsm-mt-4"
+        className="p-3 bg-blue-500 text-white rounded mt-4"
         onClick={openModal}
       >
         Open next modal
       </button>
+      <div className="mt-8">
+        Toggle some long content to see how react-simple-hook-modal behaves.
+      </div>
+      <button
+        className="p-3 bg-blue-700 text-white rounded mt-4"
+        onClick={() => setToggle(prev => !prev)}
+      >
+        Toggle long content
+      </button>
+      {toggle ? (
+        <div className="mt-4">
+          {[...Array(30)].map((e, i) => (
+            <p key={i} className="mb-2">
+              Are you using react-simple-hook-modal yet?
+            </p>
+          ))}
+        </div>
+      ) : null}
     </>
   );
 };
@@ -40,10 +60,16 @@ const Component = () => {
   const { isModalOpen, openModal, closeModal } = useModal();
 
   return (
-    <div style={{ padding: '2rem' }}>
-      <h1 className="rsm-mb-4 rsm-text-2xl">React Simple Modal Example</h1>
+    <div className="p-8">
+      <h1 className="mb-4 text-2xl">React Simple Modal Example</h1>
+      <a
+        className="block mb-4 hover:text-blue-700"
+        href="https://github.com/mbrookson/react-simple-hook-modal"
+      >
+        https://github.com/mbrookson/react-simple-hook-modal
+      </a>
       <button
-        className="rsm-p-3 rsm-bg-blue-500 rsm-text-white rsm-rounded"
+        className="p-3 bg-blue-500 text-white rounded"
         onClick={openModal}
       >
         Open modal