react-simple-snackbar
v1.1.11TypeScript
A really simple React snackbar component
0/weekUpdated 3 years agoMITUnpacked: 346.2 KB
Published by Evandro Macedo
npm install react-simple-snackbar
title="NPM Version"
target="blank"
>
alt="NPM Version"
/>
title="Build Status"
target="blank"
>
alt="Build Status"
/>
title="Coverage Status"
target="blank"
>
alt="Coverage Status"
/>
alt="Gzipped size"
/>
alt="JavaScript Style Guide"
/>
title="MIT License"
target="blank"
>
alt="MIT License"
/>
You can check a quick demo here.
Getting Started
$3
``
npm install --save react-simple-snackbar
or
`
yarn add react-simple-snackbar
$3
First, you need to wrap your application into a SnackbarProvider:
`jsx
// App.js
import React from 'react'
import SnackbarProvider from 'react-simple-snackbar'
import SomeChildComponent from './SomeChildComponent'
export default function App() {
return (
)
}
`
Then you can use both options on any descendant component:
#### 1. useSnackbar() hook on function components
`jsx
// SomeChildComponent.js
import React from 'react'
import { useSnackbar } from 'react-simple-snackbar'
export default function SomeChildComponent() {
const [openSnackbar, closeSnackbar] = useSnackbar()
return (
)
}
`
#### 2.
HoC on class components
`jsx
// SomeChildComponent.js
import React from 'react'
import { withSnackbar } from 'react-simple-snackbar'class SomeChildComponent extends React.Component {
render() {
const { openSnackbar, closeSnackbar } = this.props
return (
)
}
}export default withSnackbar(SomeChildComponent)
`API
$3
These methods are are returned from
hook in array destructuring syntax:`js noLines
const [openSnackbar, closeSnackbar] = useSnackbar()// You can also give different names as you wish
const [open, close] = useSnackbar()
`Or added as additional props on components wrapped in
:`js noLines
const { openSnackbar, closeSnackbar } = this.props
`####
-
: the node you want to show into the Snackbar. It can be just "Some string like showed on Basic Usage", or Some element you would like to show
.-
duration: a number in milliseconds to set the duration of the Snackbar. The default value is 5000.####
closeSnackbar()- This method is used if you want to close the Snackbar programmatically. It doesn't receive any params.
$3
You can pass an options object to customize your Snackbar. This object can be passed either in
or as second argument of withSnackbar(Component [, options]). It accepts three options:-
position: a custom position for your Snackbar. The default value is bottom-center, and the possible values are top-left, top-center, top-right, bottom-left, bottom-center and bottom-right.-
style: a style object with camelCased properties and string values. These styles are applied to the Snackbar itself.-
closeStyle: same as above, but the styles are applied to the close button. You can use font properties to style the X icon.For example:
`jsx noLines
const options = {
position: 'bottom-right',
style: {
backgroundColor: 'midnightblue',
border: '2px solid lightgreen',
color: 'lightblue',
fontFamily: 'Menlo, monospace',
fontSize: '20px',
textAlign: 'center',
},
closeStyle: {
color: 'lightcoral',
fontSize: '16px',
},
}// Usage with hooks
useSnackbar(options)
// Usage with HoC
withSnackbar(Component, options)
`Testing
> The snackbar itself is already tested and you don't have to worry about it.
To test components that use Snackbar functionalities, there are some approaches as described bellow. This examples makes use of Jest and Enzyme for testing, but you can use whatever you want.
$3
You can mock the implementation of
to return an array containing openSnackbar and closeSnackbar as mocked functions:
`jsx
// Component.test.js
import React from 'react'
import { shallow } from 'enzyme'
import * as Snackbar from 'react-simple-snackbar'
import Component from './Component'// Mocks the open and close functions
const openSnackbarMock = jest.fn()
const closeSnackbarMock = jest.fn()
jest.spyOn(Snackbar, 'useSnackbar').mockImplementation(() => [openSnackbarMock, closeSnackbarMock])
it('can test the openSnackbar and closeSnackbar functions', () => {
const wrapper = shallow(
// Simulates click on some buttons that opens and closes the Snackbar
wrapper.find('button.open').simulate('click')
wrapper.find('button.close').simulate('click')
// Some examples of how you can test the mocks
expect(openSnackbarMock).toHaveBeenCalled()
expect(openSnackbarMock).toHaveBeenCalledTimes(1)
expect(openSnackbarMock).toHaveBeenCalledWith('This is the text of the Snackbar.')
expect(closeSnackbarMock).toHaveBeenCalled()
expect(closeSnackbarMock).toHaveBeenCalledTimes(1)
})
`$3
To make it easier to test and not make use of
, you can export your component in isolation as a named export, and as a default export wrapped in withSnackbar():`jsx
// Component.js// (...)
// Here goes all the component's code
// (...)
// Named export for testing, and default export for using
export { Component }
export default withSnackbar(Component)
`So you can get the component as a named import, then mock the
and closeSnackbar functions as common props if you want:`jsx
// Component.test.js
import React from 'react'
import { shallow } from 'enzyme'
import { Component } from './Component'it('can test the openSnackbar and closeSnackbar functions', () => {
const openSnackbarMock = jest.fn()
const closeSnackbarMock = jest.fn()
const wrapper = shallow(
)
// Simulates click on some buttons that opens and closes the Snackbar
wrapper.find('button.open').simulate('click')
wrapper.find('button.close').simulate('click')
// Some examples of how you can test the mocks
expect(openSnackbarMock).toHaveBeenCalled()
expect(openSnackbarMock).toHaveBeenCalledTimes(1)
expect(openSnackbarMock).toHaveBeenCalledWith('This is the text of the Snackbar.')
expect(closeSnackbarMock).toHaveBeenCalled()
expect(closeSnackbarMock).toHaveBeenCalledTimes(1)
})
``Contributing
See CONTRIBUTING for more information on how to get started.
License
React Simple Snackbar is open source software licensed as MIT.