├── .github
├── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
└── workflows
│ └── build-deploy-example.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── assets
└── logo.png
├── example
├── .gitignore
├── README.md
├── bash.exe.stackdump
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.tsx
│ ├── assets
│ │ ├── arrow-down.svg
│ │ ├── chevron-down.svg
│ │ ├── copy.svg
│ │ ├── index.ts
│ │ └── npm.svg
│ ├── components
│ │ ├── ApiTable.tsx
│ │ └── Code.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── prism-atom-dark.css
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock
├── package.json
├── rollup.config.js
├── src
├── assets
│ └── icons
│ │ ├── close.svg
│ │ └── index.ts
├── components
│ ├── ReactPortal.tsx
│ └── index.ts
├── config.ts
├── hooks
│ └── useDisableScroll.ts
├── index.tsx
├── styles.scss
└── types.ts
├── tsconfig.json
├── types.d.ts
└── yarn.lock
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: "[BUG]: Issue in brief"
5 | labels: bug
6 | assignees: SneakySensei
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: "[FEATURE]: Brief title for the feature"
5 | labels: enhancement
6 | assignees: SneakySensei
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/.github/workflows/build-deploy-example.yml:
--------------------------------------------------------------------------------
1 | name: Build and Deploy Demo App
2 | on:
3 | push:
4 | branches:
5 | - main
6 | pull_request:
7 | branches:
8 | - main
9 |
10 | jobs:
11 | build:
12 | name: Build
13 | runs-on: ubuntu-latest
14 |
15 | steps:
16 | - name: Checkout code
17 | uses: actions/checkout@v2
18 |
19 | - name: Install Node.js
20 | uses: actions/setup-node@v2
21 | with:
22 | node-version: 16.x
23 |
24 | - name: Install NPM packages
25 | run: |
26 | yarn
27 | yarn build
28 | cd example
29 | yarn
30 |
31 | - name: Build project
32 | run: |
33 | cd example
34 | yarn build
35 | cd build
36 | touch CNAME
37 | echo "react-lean-modal.snehil.dev" >> CNAME
38 |
39 | - name: Upload production-ready build files
40 | uses: actions/upload-artifact@v3
41 | with:
42 | name: production-files
43 | path: ./example/build
44 |
45 | delpoy:
46 | name: Deploy
47 | needs: build
48 | runs-on: ubuntu-latest
49 | if: github.ref == 'refs/heads/main'
50 |
51 | steps:
52 | - name: Download artifact
53 | uses: actions/download-artifact@v3
54 | with:
55 | name: production-files
56 | path: ./build
57 |
58 | - name: Deploy to gh-pages
59 | uses: peaceiris/actions-gh-pages@v3
60 | with:
61 | github_token: ${{ secrets.GITHUB_TOKEN }}
62 | publish_dir: ./build
63 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "semi": true,
5 | "singleQuote": true
6 | }
7 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Snehil
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | This package exposes a `` component which is fully controlled by a single prop. It comes packed with enter and exit animations for all your motion needs.
6 |
7 | It's currently powered by [react-transition-group](https://reactcommunity.org/react-transition-group/) but I'm planning to turn it into a zero-dependency package in the near future so that it doesn't hurt your [bundle size](https://bundlephobia.com/package/react-lean-modal).
8 |
9 |
}
42 | />
43 | ```
44 |
45 | ## 🔌 API
46 |
47 | | Property | Description | Type | Default |
48 | | -------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------ |
49 | | isOpen | Whether the modal is open or closed | `boolean` | `false` |
50 | | onClose | Function that's called when a close action is registered. This is where we set the isOpen prop to false | `() => void` | - |
51 | | children | Content to render inside the modal's content area | `React.ReactNode` | - |
52 | | enterAnimation | The animation to show when modal opens | [AnimationType](#animationtype) | `"zoom-in"` |
53 | | exitAnimation | The animation to show when modal closes. Behaves as the reverse of enterAnimation. | [AnimationType](#animationtype) | `"zoom-in"` |
54 | | timeout | The duration of animations in milliseconds | `number` | `250`(ms) |
55 | | titleElement | Content to render on the left of the modal header | `React.ReactNode` | - |
56 | | closeIcon | Content to render inside the close button | `React.ReactNode` | Included SVG |
57 | | classNames | Additional class names to apply to the modal | `{root?: string, backdrop?: string, content?: string, header?: string, closeButton?: string, body?: string}` | `{}` |
58 |
59 | ### AnimationType
60 |
61 | ` "fade" | "fade-left" | "fade-right" | "fade-top" | "fade-bottom" | "slide-left" | "slide-right" | "slide-top" | "slide-bottom" | "zoom-in" | "zoom-out" | "spin-cw" | "spin-ccw" | "rotate-left" | "rotate-right" | "rotate-top" | "rotate-bottom"`
62 |
63 | ## 🚨 Forking this repo
64 |
65 | Many people have contacted us asking if they can use this code for their own websites. The answer to that question is usually "yes", with attribution. There are some cases, such as using this code for a business or something that is greater than a personal project, that we may be less comfortable saying yes to. If in doubt, please don't hesitate to ask us.
66 |
67 | We value keeping this package open source, but as you all know, plagiarism is bad. We actively spend a non-negligible amount of effort developing, designing, and trying to perfect this iteration of our package, and we are proud of it! All we ask is to not claim this effort as your own.
68 |
69 | So, feel free to fork this repo. If you do, please just give us proper credit by linking back to this repo, [https://github.com/SneakySensei/react-lean-modal](https://github.com/jagnani73/react-easy-marquee/). Refer to this handy [quora](https://www.quora.com/Is-it-bad-to-copy-other-peoples-code) post if you're not sure what to do. Thanks!
70 |
71 | ## 💥 Mention
72 |
73 | Parts of this README is inspired from [https://github.com/jagnani73/react-easy-marquee/](https://github.com/jagnani73/react-easy-marquee/).
74 |
--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SneakySensei/react-lean-modal/83cfcf0a4a7be50631f1197ec9a92611ff5d76b6/assets/logo.png
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/example/bash.exe.stackdump:
--------------------------------------------------------------------------------
1 | Stack trace:
2 | Frame Function Args
3 | 000FFFFA310 00210062B0E (002102970D8, 00210275E3E, 000FFFFA310, 000FFFF9210)
4 | 000FFFFA310 0021004846A (00000000000, 00000000000, 00000000000, 00000000000)
5 | 000FFFFA310 002100484A2 (00210297189, 000FFFFA1C8, 000FFFFA310, 00000000000)
6 | 000FFFFA310 002100D2DDE (00000000000, 00000000000, 00000000000, 00000000000)
7 | 000FFFFA310 002100D2F05 (000FFFFA320, 00000000000, 00000000000, 00000000000)
8 | 000FFFFA5E0 002100D44C5 (000FFFFA320, 00000000000, 00000000000, 00000000000)
9 | End of stack trace
10 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-lean-modal-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://react-lean-modal.snehil.dev",
6 | "dependencies": {
7 | "@testing-library/jest-dom": "^5.14.1",
8 | "@testing-library/react": "^12.0.0",
9 | "@testing-library/user-event": "^13.2.1",
10 | "@types/jest": "^27.0.1",
11 | "@types/node": "^16.7.13",
12 | "@types/prismjs": "^1.26.0",
13 | "@types/react": "^17.0.20",
14 | "@types/react-dom": "^17.0.9",
15 | "prismjs": "^1.29.0",
16 | "react": "link:../node_modules/react",
17 | "react-dom": "link:../node_modules/react-dom",
18 | "react-lean-modal": "link:..",
19 | "react-scripts": "5.0.0",
20 | "typescript": "^4.4.2",
21 | "web-vitals": "^2.1.0"
22 | },
23 | "scripts": {
24 | "start": "react-scripts start",
25 | "build": "react-scripts build",
26 | "test": "react-scripts test",
27 | "eject": "react-scripts eject"
28 | },
29 | "eslintConfig": {
30 | "extends": [
31 | "react-app",
32 | "react-app/jest"
33 | ]
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | },
47 | "devDependencies": {
48 | "autoprefixer": "^10.4.8",
49 | "postcss": "^8.4.16",
50 | "tailwindcss": "^3.1.8"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/example/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SneakySensei/react-lean-modal/83cfcf0a4a7be50631f1197ec9a92611ff5d76b6/example/public/favicon.ico
--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
28 |
29 |
33 | React Lean Modal
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SneakySensei/react-lean-modal/83cfcf0a4a7be50631f1197ec9a92611ff5d76b6/example/public/logo192.png
--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SneakySensei/react-lean-modal/83cfcf0a4a7be50631f1197ec9a92611ff5d76b6/example/public/logo512.png
--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/example/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Modal, { ANIMATIONS, AnimationType } from 'react-lean-modal';
3 |
4 | import { ArrowDownIcon, CopyIcon, NpmIcon } from 'assets';
5 | import Code from 'components/Code';
6 | import ApiTable from 'components/ApiTable';
7 |
8 | const code = (
9 | enterAnimation: string,
10 | exitAnimation: string,
11 | timeout: number
12 | ) => ` setShowModal(false)}
18 | titleElement={
3 | 
