Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/se-gl/next-modal
A sustainable and lightweight [2KB] react modal component project based on greenCSS. SSR ready.
https://github.com/se-gl/next-modal
green javascript javascript-library modal modal-box modal-dialog modal-dialogs modal-plugin modal-window modal-windows modals next nextjs npm npm-package react reactjs ssr sustainability
Last synced: 9 days ago
JSON representation
A sustainable and lightweight [2KB] react modal component project based on greenCSS. SSR ready.
- Host: GitHub
- URL: https://github.com/se-gl/next-modal
- Owner: Se-Gl
- License: mit
- Created: 2022-07-22T18:18:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T16:25:33.000Z (over 2 years ago)
- Last Synced: 2024-10-16T05:51:07.302Z (24 days ago)
- Topics: green, javascript, javascript-library, modal, modal-box, modal-dialog, modal-dialogs, modal-plugin, modal-window, modal-windows, modals, next, nextjs, npm, npm-package, react, reactjs, ssr, sustainability
- Language: JavaScript
- Homepage: https://greencss.dev
- Size: 1.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# SSR Modal Component
[](https://github.com/Se-Gl/next-modal/actions/workflows/prettier.yml)
[](https://badgen.net/npm/dw/next-modal)
[](https://badgen.net/npm/v/next-modal)
[](https://badgen.net/bundlephobia/minzip/next-modal)
[](https://badgen.net/npm/license/next-modal)
This is a sustainable React modal component project based on [greenCSS](https://github.com/Se-Gl/greenCSS), which works with plain React, as well as with SSR - such as Next.js. Animations and the basic design were realised with greenCSS. greenCSS is an animated, responsive, lightweight and sustainable CSS library. It is recommended that you also use greenCSS in your project. If you don't want to, just style your modal with your own classes.
## Features
- Tested with react and next.js
- Press CTRL + k to open the modal
- Press ESC key to close the modal
- On Chrome browser the background is blurred. In Firefox this feature is not available, there the background has an opacity of 75%.
- Click on the background or the close icon (top right corner) to close the modal.
- The Modal component use a default greenCSS fade in animation with a duration of 500ms `fade-in animation-duration-500ms animation-forwards`. If you want to animate the `Modal.Header` or `Modal.Body`, just add your greenCSS or your custom animation as a class to the `className`. Here can find all [greenCSS animations](https://www.greencss.dev/examples/animation). p.e. ``
- Do you want to use your own close icon on the top right corner? Add `closeIcon` with your own (svg-) component. `X}>` The recommended size for an svg is 20x20px.
- People who do not want animations will automatically not be shown any motions. As it will be blocked by default `prefers-reduced-motion: reduce`
## Getting Started
First, install the Modal dependency:
```bash
npm i next-modal
```
### Next.js installation
In the pages directory, add `_document.js`. It is important to add `
` below the `` component. Otherwise your SSR Modal will not work. Learn more about the custom [document](https://nextjs.org/docs/advanced-features/custom-document).
```js
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
)
}
}
export default MyDocument
```
The following jsx file below is based on greenCSS. If you don't want to use it, you can add your own `classNames`.
```js
import React, { useState } from 'react'
import { Modal } from 'next-modal'
export default function Home() {
const [toggleModal, setToggleModal] = useState(false)
return (
{/* Modal Toggle Button */}
setToggleModal((prev) => !prev)} className='bg-red-9 px-20px py-10px rounded-10px hover:bg-red-7'>
Toggle Modal
{/* Modal */}
👋 Hi, I'm your modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Quis vel eros donec ac. Mauris
pellentesque pulvinar pellentesque habitant morbi tristique senectus.
Nunc non blandit massa enim nec dui nunc. Sed elementum tempus egestas sed sed risus. Senectus et netus et malesuada
fames ac turpis egestas maecenas. Urna nec tincidunt praesent semper feugiat. Est ante in nibh mauris cursus mattis
molestie. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant.
copyright
)
}
```
Do you want to use your style within the modal? No problem - you can add any JSX inside.
```js
import React, { useState } from 'react'
import { Modal } from 'next-modal'
export default function Home() {
const [toggleModal, setToggleModal] = useState(false)
return (
{/* Modal Toggle Button */}
setToggleModal((prev) => !prev)} className='bg-red-9 px-20px py-10px rounded-10px hover:bg-red-7'>
Toggle Modal
{/* Modal */}
👋 Hi, I'm your independent modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Quis vel eros donec ac. Mauris pellentesque
pulvinar pellentesque habitant morbi tristique senectus.
)
}
```
### React installation
You can also use next-modal in your create-react-app. Head to your `public/index.html` file and add `
` below the ``.
```html
React App
You need to enable JavaScript to run this app.
```
Within a page or a component, you can now add and use the Modal.
```js
import React, { useState } from 'react'
import { Modal } from 'next-modal'
function App() {
const [toggleModal, setToggleModal] = useState(false)
return (
{/* Modal Toggle Button */}
setToggleModal((prev) => !prev)} className='bg-red-9 px-20px py-10px rounded-10px hover:bg-red-7'>
Toggle Modal
{/* Modal */}
👋 Hi, I'm your modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Quis vel eros donec ac. Mauris
pellentesque pulvinar pellentesque habitant morbi tristique senectus.
copyright
)
}
export default App
```
## Summary
1. Import the modal.
2. Add the div with the id="modal-portal":
- Next.js: Adjust pages/\_document.js
- React: Adjust public/index.html
3. In your page/component:
- Set the react useState to toggle the modal.
- Create a button to activate the modal with one click.
- Create and adjust your personal modal.
4. Have fun with the sustainable Next.js Modal
## Props
| Name | Default Value | Description |
| --------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| toggle | - | useState toggle state |
| setToggle | - | useState toggle setToggle |
| className | "" | Use your own className to style the modal content |
| backgroundAnimation | 'fade-in animation-duration-500ms animation-forwards' | Add your custom animation className in order to overwrite the default fade in animation for the background |
| modalContentAnimation | 'fade-in animation-duration-500ms animation-forwards' | Add your custom animation className in order to overwrite the default fade in animation for the modal content component |
| closeIcon | ` ` | Add your own close icon on the top right, may be an svg or your custom component |
| useKeyInput | true | Use the default key inputs "CTRL + k" to open the modal and "ESC" to close the modal |
| `` | `{children}` | This is the Modal component. Add your own child element(s) or use the `` and `` inside. |
| `` | `{children}` | Add a header text |
| `` | `{children}` | Add body elements |
| `` | `{children}` | Add footer elements |
## Contribute: We Use [Semantic Release](https://github.com/semantic-release/semantic-release)
We use semantic versioning for commit messages.
For commit messages, use semantig writing:
| Commit | Usage | Version |
| -------------------------------------------------- | :--------------: | ------- |
| fix(your-change): a small change, maybe just a fix | Fix Release | v.0.0.1 |
| feat(your-change): a new feature, a medium change | Feature Release | v.0.1.0 |
| perf(your-change): a breaking change or hotfix | Breaking Release | v.1.0.0 |