Skip to content

Commit 4010f29

Browse files
mbrooksonmbrookson
authored
Merge pull request #5 from mbrookson/feature/transitions
Add transitions
2 parents 4378063 + 226c4e8 commit 4010f29

19 files changed

+367
-191
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,11 @@ yarn add react-simple-hook-modal
2929
- This will not render anything to the DOM here
3030
- Modals are rendered after allthe children in side `<ModalProvider/>`
3131
- Use the `useModal` hook to control your modal's state
32+
- Use the `ModalTransition` enum to optionally set the transition animation
33+
- Currently there are 3 to select from, or choose NONE to disable the transitions
3234

3335
```
34-
import { ModalProvider, Modal, useModal } from 'react-simple-hook-modal';
36+
import { ModalProvider, Modal, useModal, ModalTransition } from 'react-simple-hook-modal';
3537
3638
const MyComponent = () => {
3739
const { isModalOpen, openModal, closeModal } = useModal();
@@ -46,6 +48,7 @@ const MyComponent = () => {
4648
<button onClick={openModal}>Open</button>
4749
)}
4850
isOpen={isModalOpen}
51+
transition={ModalTransition.BOTTOM_UP}
4952
/>
5053
</>
5154
);

‎example/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
/>
1414
<link
1515
rel="shortcut icon"
16-
href="./favicon.png"
16+
href="./logo.png"
1717
type="image/x-icon"
1818
>
1919
<link
2020
rel="icon"
21-
href="./favicon.png"
21+
href="./logo.png"
2222
type="image/x-icon"
2323
>
24-
<title>React Simple Modal Example</title>
24+
<title>React Simple Hook Modal</title>
2525
</head>
2626

2727
<body>

‎example/index.tsx‎

Lines changed: 9 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,21 @@
11
import 'react-app-polyfill/ie11';
22
import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
4-
import { ModalProvider, Modal, useModal } from '../dist/index';
4+
import { ModalProvider, ModalTransition } from '../dist/index';
55
import '../dist/styles.css';
66
import './styles.css';
7-
8-
const ModalContent = ({ onCloseClicked }) => {
9-
const { isModalOpen, openModal, closeModal } = useModal();
10-
const [toggle, setToggle] = React.useState(false);
11-
12-
return (
13-
<>
14-
<div>This modal can be closed by clicking the close button below.</div>
15-
<button
16-
className="p-3 bg-red-500 text-white rounded mt-4 mr-4"
17-
onClick={onCloseClicked}
18-
>
19-
Close this modal
20-
</button>
21-
<Modal
22-
id="2"
23-
content={<p>This modal can be closed by clicking the backdrop.</p>}
24-
isOpen={isModalOpen}
25-
onBackdropClick={closeModal}
26-
/>
27-
<div className="mt-8">
28-
Open another modal which will appear stacked on top of the current
29-
modal.
30-
</div>
31-
<button
32-
className="p-3 bg-blue-500 text-white rounded mt-4"
33-
onClick={openModal}
34-
>
35-
Open next modal
36-
</button>
37-
<div className="mt-8">
38-
Toggle some long content to see how react-simple-hook-modal behaves.
39-
</div>
40-
<button
41-
className="p-3 bg-blue-700 text-white rounded mt-4"
42-
onClick={() => setToggle(prev => !prev)}
43-
>
44-
Toggle long content
45-
</button>
46-
{toggle ? (
47-
<div className="mt-4">
48-
{[...Array(30)].map((e, i) => (
49-
<p key={i} className="mb-2">
50-
Are you using react-simple-hook-modal yet?
51-
</p>
52-
))}
53-
</div>
54-
) : null}
55-
</>
56-
);
57-
};
58-
59-
const Component = () => {
60-
const { isModalOpen, openModal, closeModal } = useModal();
61-
62-
return (
63-
<div className="p-8">
64-
<h1 className="mb-4 text-2xl">React Simple Modal Example</h1>
65-
<a
66-
className="block mb-4 hover:text-blue-700"
67-
href="https://github.com/mbrookson/react-simple-hook-modal"
68-
>
69-
https://github.com/mbrookson/react-simple-hook-modal
70-
</a>
71-
<button
72-
className="p-3 bg-blue-500 text-white rounded"
73-
onClick={openModal}
74-
>
75-
Open modal
76-
</button>
77-
<Modal
78-
id="1"
79-
content={<ModalContent onCloseClicked={closeModal} />}
80-
isOpen={isModalOpen}
81-
/>
82-
</div>
83-
);
84-
};
7+
import { Header } from './src/Header';
8+
import { Example } from './src/Example';
9+
import { TransitionSelect } from './src/TransitionSelect';
8510

8611
const App = () => {
12+
const [transition, setTransition] = React.useState(ModalTransition.SCALE);
13+
8714
return (
8815
<ModalProvider>
89-
<Component />
16+
<Header />
17+
<Example transition={transition} />
18+
<TransitionSelect value={transition} onChange={setTransition} />
9019
</ModalProvider>
9120
);
9221
};

‎example/favicon.png‎ renamed to ‎example/logo.png‎

File renamed without changes.

‎example/package-lock.json‎

Lines changed: 21 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"build:css": "postcss tailwind.css -o styles.css"
1010
},
1111
"dependencies": {
12-
"react-app-polyfill": "^1.0.0"
12+
"components": "^0.1.0",
13+
"react-app-polyfill": "^1.0.0",
14+
"react-icons": "^3.10.0"
1315
},
1416
"alias": {
1517
"react": "../node_modules/react",
@@ -24,7 +26,7 @@
2426
"cssnano": "^4.1.10",
2527
"parcel": "^1.12.3",
2628
"postcss-cli": "^7.1.0",
27-
"tailwindcss": "^1.2.0",
29+
"tailwindcss": "^1.3.5",
2830
"typescript": "^3.4.5"
2931
}
30-
}
32+
}

‎example/postcss.config.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@ const tailwindcss = require('tailwindcss');
22
const autoprefixer = require('autoprefixer');
33
const cssnano = require('cssnano');
44
const purgecss = require('@fullhuman/postcss-purgecss')({
5-
content: ['./*.html', './*.tsx'],
5+
content: ['./*.html', './*.tsx', './components/*.tsx'],
66
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
77
});
88

99
module.exports = {
10-
plugins: [tailwindcss(), autoprefixer(), cssnano(), purgecss],
10+
plugins: [
11+
tailwindcss(),
12+
autoprefixer(),
13+
cssnano(),
14+
...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
15+
],
1116
};

‎example/src/Example.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import * as React from 'react';
2+
import { Modal, useModal } from '../../dist/index';
3+
4+
const ModalContent = ({ transition, onCloseClicked }) => {
5+
const { isModalOpen, openModal, closeModal } = useModal();
6+
const [toggle, setToggle] = React.useState(false);
7+
8+
return (
9+
<>
10+
<div>This modal can be closed by clicking the close button below.</div>
11+
<button
12+
className="p-3 bg-red-500 text-white rounded mt-4 mr-4"
13+
onClick={onCloseClicked}
14+
>
15+
Close this modal
16+
</button>
17+
<Modal
18+
id="2"
19+
content={<p>This modal can be closed by clicking the backdrop.</p>}
20+
isOpen={isModalOpen}
21+
onBackdropClick={closeModal}
22+
transition={transition}
23+
/>
24+
<div className="mt-8">
25+
Open another modal which will appear stacked on top of the current
26+
modal.
27+
</div>
28+
<button
29+
className="p-3 bg-blue-500 text-white rounded mt-4"
30+
onClick={openModal}
31+
>
32+
Open next modal
33+
</button>
34+
<div className="mt-8">
35+
Toggle some long content to see how react-simple-hook-modal behaves.
36+
</div>
37+
<button
38+
className="p-3 bg-blue-700 text-white rounded mt-4"
39+
onClick={() => setToggle(prev => !prev)}
40+
>
41+
Toggle long content
42+
</button>
43+
{toggle ? (
44+
<div className="mt-4">
45+
{[...Array(30)].map((e, i) => (
46+
<p key={i} className="mb-2">
47+
Are you using react-simple-hook-modal yet?
48+
</p>
49+
))}
50+
</div>
51+
) : null}
52+
</>
53+
);
54+
};
55+
56+
export const Example = ({ transition }) => {
57+
const { isModalOpen, openModal, closeModal } = useModal();
58+
59+
return (
60+
<div className="container pt-8">
61+
<h2 className="text-xl text-gray-800 font-bold mb-4">
62+
Click the button below to see an example modal
63+
</h2>
64+
<button
65+
className="p-3 bg-blue-500 text-white rounded"
66+
onClick={openModal}
67+
>
68+
Open modal
69+
</button>
70+
<Modal
71+
id="1"
72+
content={
73+
<ModalContent transition={transition} onCloseClicked={closeModal} />
74+
}
75+
isOpen={isModalOpen}
76+
transition={transition}
77+
/>
78+
</div>
79+
);
80+
};

‎example/src/Header.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as React from 'react';
2+
import { FaGithub } from 'react-icons/fa';
3+
// @ts-ignore
4+
import images from '../*.png';
5+
6+
export const Header = () => {
7+
return (
8+
<div className="bg-blue-800 text-white py-24 text-center md:text-right">
9+
<div className="container">
10+
<div className="flex flex-col lg:flex-row items-center">
11+
<div className="lg:pr-16">
12+
<h1 className="mb-4 text-5xl font-bold">React Simple Hook Modal</h1>
13+
<div className="flex flex-row items-center justify-center lg:justify-end pb-8">
14+
<FaGithub className="inline" />
15+
<a
16+
className="ml-2 hover:text-blue-300 transition transition-colors duration-200"
17+
href="https://github.com/mbrookson/react-simple-hook-modal"
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
>
21+
View on Github
22+
</a>
23+
</div>
24+
</div>
25+
<div className="flex-1">
26+
<img src={images.logo} />
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
};

0 commit comments

Comments
 (0)