Skip to content

context flag to know when snackbar is open #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

context flag to know when snackbar is open #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e9f3d46
context flag to know when snackbar is open
Jul 21, 2020
7b5fd84
set duration to -1 to persist snackbar until it is dismissed
Jul 21, 2020
6656faf
Merge pull request #1 from evandromacedo/master
zpxp Jul 4, 2022
69ff1d7
vers
Jul 6, 2022
edc6e7b
fix ref
Jul 6, 2022
5aabebf
css
Jul 12, 2022
73bb314
v1.1.17
Jul 12, 2022
0fb33af
.
Jul 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/index.js
View file
Open in desktop

Large diffs are not rendered by default.

15,989 changes: 15,976 additions & 13 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

198 changes: 99 additions & 99 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,101 @@
{
"name": "react-simple-snackbar",
"version": "1.1.11",
"description": "A really simple React snackbar component",
"main": "dist/index.js",
"types": "./types.d.ts",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"files": [
"dist"
],
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build:dev": "rollup -c",
"test": "jest",
"test:dev": "jest --watch",
"coveralls": "jest --coverage --coverageReporters=text-lcov | coveralls",
"predeploy": "npm run build && cd site && npm install && npm run build",
"deploy": "gh-pages -d site/dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/evandromacedo/react-simple-snackbar.git"
},
"keywords": [
"react-simple-snackbar",
"react",
"simple",
"snackbar",
"component",
"hooks",
"hoc",
"high-order-component",
"alert",
"notification",
"message",
"toast",
"javascript"
],
"author": "Evandro Macedo <[email protected]> (https://github.com/evandromacedo)",
"license": "MIT",
"bugs": {
"url": "https://github.com/evandromacedo/react-simple-snackbar/issues"
},
"homepage": "https://evandromacedo.github.io/react-simple-snackbar",
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.12",
"@babel/preset-react": "^7.13.13",
"@testing-library/react-hooks": "^3.7.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"coveralls": "^3.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.23.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-standard": "^4.1.0",
"gh-pages": "^2.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"minimist": ">=1.2.2",
"prettier": "^1.19.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"rollup": "^1.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^2.9.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-url": "^3.0.1",
"serialize-javascript": "^5.0.1"
},
"peerDependencies": {
"react": "16.x",
"react-dom": "16.x"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
],
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
}
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"react-transition-group": "^4.4.1"
}
"name": "react-simple-snackbar-fork",
"version": "1.1.17",
"description": "A really simple React snackbar component",
"main": "dist/index.js",
"types": "./types.d.ts",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"files": [
"dist"
],
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build:dev": "rollup -c",
"test": "jest",
"test:dev": "jest --watch",
"coveralls": "jest --coverage --coverageReporters=text-lcov | coveralls",
"predeploy": "npm run build && cd site && npm install && npm run build",
"deploy": "gh-pages -d site/dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/evandromacedo/react-simple-snackbar.git"
},
"keywords": [
"react-simple-snackbar",
"react",
"simple",
"snackbar",
"component",
"hooks",
"hoc",
"high-order-component",
"alert",
"notification",
"message",
"toast",
"javascript"
],
"author": "Evandro Macedo <[email protected]> (https://github.com/evandromacedo)",
"license": "MIT",
"bugs": {
"url": "https://github.com/evandromacedo/react-simple-snackbar/issues"
},
"homepage": "https://evandromacedo.github.io/react-simple-snackbar",
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.12",
"@babel/preset-react": "^7.13.13",
"@testing-library/react-hooks": "^3.7.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"coveralls": "^3.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.23.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.23.1",
"eslint-plugin-standard": "^4.1.0",
"gh-pages": "^2.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"minimist": ">=1.2.2",
"prettier": "^1.19.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"rollup": "^1.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^2.9.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-url": "^3.0.1",
"serialize-javascript": "^5.0.1"
},
"peerDependencies": {
"react": "16.x",
"react-dom": "16.x"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
],
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
}
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"react-transition-group": "^4.4.2"
}
}
19 changes: 13 additions & 6 deletions src/Snackbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { createContext, useState } from 'react'
import React, { createContext, useState, useRef } from 'react'
import { CSSTransition } from 'react-transition-group'
import styles from './Snackbar.css'

Expand All @@ -18,7 +18,7 @@ export const positions = [
// Context used by the hook useSnackbar() and HoC withSnackbar()
export const SnackbarContext = createContext(null)

export default function Snackbar({ children }) {
export default function Snackbar({ children, className }) {
// Current open state
const [open, setOpen] = useState(false)
// Current timeout ID
Expand Down Expand Up @@ -61,21 +61,28 @@ export default function Snackbar({ children }) {
setOpen(false)
}

const nodeRef = useRef(null)

// Returns the Provider that must wrap the application
return (
<SnackbarContext.Provider value={{ openSnackbar, closeSnackbar }}>
<SnackbarContext.Provider
value={{ openSnackbar, closeSnackbar, snackbarIsOpen: open }}
>
{children}

{/* Renders Snackbar on the end of the page */}
<CSSTransition
in={open}
timeout={150}
nodeRef={nodeRef}
mountOnEnter
unmountOnExit
// Sets timeout to close the snackbar
onEnter={() => {
clearTimeout(timeoutId)
setTimeoutId(setTimeout(() => setOpen(false), duration))
if (duration >= 0) {
setTimeoutId(setTimeout(() => setOpen(false), duration))
}
}}
// Sets custom classNames based on "position"
className={`${styles['snackbar-wrapper']} ${
Expand All @@ -92,8 +99,8 @@ export default function Snackbar({ children }) {
}}
>
{/* This div will be rendered with CSSTransition classNames */}
<div>
<div className={styles.snackbar} style={customStyles}>
<div ref={nodeRef} id="snackbar-root">
<div className={styles.snackbar + " " + (className || "")} style={customStyles}>
{/* Snackbar's text */}
<div className={styles.snackbar__text}>{text}</div>

Expand Down
4 changes: 2 additions & 2 deletions src/useSnackbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const useSnackbar = ({
style = {},
closeStyle = {},
} = {}) => {
const { openSnackbar, closeSnackbar } = useContext(SnackbarContext)
const { openSnackbar, closeSnackbar, snackbarIsOpen } = useContext(SnackbarContext)

// If no correct position is passed, 'bottom-center' is set
if (!positions.includes(position)) {
Expand All @@ -19,5 +19,5 @@ export const useSnackbar = ({
}

// Returns methods in hooks array way
return [open, closeSnackbar]
return [open, closeSnackbar, snackbarIsOpen]
}
1 change: 1 addition & 0 deletions src/withSnackbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export function withSnackbar(
<WrappedComponent
openSnackbar={this.open}
closeSnackbar={this.close}
snackbarIsOpen={this.context.snackbarIsOpen}
{...this.props}
/>
)
Expand Down
Loading