@codejq/react-simple-snackbar 1.2.0 → 1.2.1

package/README.md

@@ -4,12 +4,12 @@
 
 <p align="center">
   <a
-    href="https://www.npmjs.com/package/react-simple-snackbar"
+    href="https://www.npmjs.com/package/@codejq/react-simple-snackbar"
     title="NPM Version"
     target="blank"
   >
     <img
-      src="https://img.shields.io/npm/v/react-simple-snackbar"
+      src="https://img.shields.io/npm/v/@codejq/react-simple-snackbar"
       alt="NPM Version"
     />
   </a>
@@ -23,16 +23,6 @@
       alt="CI Status"
     />
   </a>
-  <a
-    href="https://coveralls.io/github/codejq/react-simple-snackbar?branch=master"
-    title="Coverage Status"
-    target="blank"
-  >
-    <img
-      src="https://coveralls.io/repos/github/codejq/react-simple-snackbar/badge.svg?branch=master"
-      alt="Coverage Status"
-    />
-  </a>
   <a href="#" title="Gzipped size">
     <img
       src="https://img.badgesize.io/codejq/react-simple-snackbar/master/dist/index.js.svg?compression=gzip"
@@ -51,15 +41,19 @@
     target="blank"
   >
     <img
-      src="https://img.shields.io/npm/l/@testing-library/react-hooks.svg"
+      src="https://img.shields.io/npm/l/@codejq/react-simple-snackbar.svg"
       alt="MIT License"
     />
   </a>
 </p>
 
-> **This is the actively maintained fork** of the original `react-simple-snackbar` by [@evandromacedo](https://github.com/evandromacedo). The original repository is no longer maintained.
+> **This is the actively maintained fork** of the original `react-simple-snackbar` by [@evandromacedo](https://github.com/evandromacedo). The original repository is no longer maintained. This fork adds React 16.8–19 support, a modernized UI, new positions, per-call background color, and automated publishing.
+
+## Live Demo
 
-You can check the [live demo](https://codejq.github.io/react-simple-snackbar/).
+**[codejq.github.io/react-simple-snackbar](https://codejq.github.io/react-simple-snackbar/)**
+
+The demo page lets you interactively try every position, custom color, custom duration, and styling option in real time.
 
 ## Getting Started
 
@@ -81,7 +75,7 @@ yarn add @codejq/react-simple-snackbar
 
 ### Basic Usage
 
-First, you need to wrap your application into a `SnackbarProvider`:
+First, wrap your application in a `SnackbarProvider`:
 
 ```jsx
 // App.js
@@ -98,9 +92,9 @@ export default function App() {
 }
 ```
 
-Then you can use both options on any descendant component:
+Then use it in any descendant component:
 
-#### 1. `useSnackbar()` hook on function components
+#### 1. `useSnackbar()` hook (function components)
 
 <!-- prettier-ignore -->
 ```jsx
@@ -124,7 +118,7 @@ export default function SomeChildComponent() {
 }
 ```
 
-#### 2. `withSnackbar()` HoC on class components
+#### 2. `withSnackbar()` HoC (class components)
 
 <!-- prettier-ignore -->
 ```jsx
@@ -156,28 +150,26 @@ export default withSnackbar(SomeChildComponent)
 
 ### Methods
 
-These methods are returned from `useSnackbar()` hook in array destructuring syntax:
-
-```js noLines
+```js
 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 `withSnackbar()`:
+Or as props on components wrapped in `withSnackbar()`:
 
-```js noLines
+```js
 const { openSnackbar, closeSnackbar } = this.props
 ```
 
 #### `openSnackbar(node [, duration [, backgroundColor]])`
 
-- **`node`**: the node you want to show into the Snackbar. It can be just `"Some string like showed on Basic Usage"`, or `<p>Some element you would <strong>like</strong> to show</p>`.
+- **`node`**: the content to show. Can be a string or any React node: `'Hello!'` or `<p>Some <strong>rich</strong> text</p>`.
 
-- **`duration`**: a number in milliseconds to set the duration of the Snackbar. The default value is `8000`.
+- **`duration`**: milliseconds before auto-close. Default: `6000`.
 
-- **`backgroundColor`**: an optional CSS color string to override the Snackbar's background color for this specific call. Equivalent to passing `style: { backgroundColor: '...' }` in the options object, but applied per-call. Takes precedence over the `style.backgroundColor` option.
+- **`backgroundColor`**: optional CSS color string to override the background color for this specific call. Takes precedence over the `style.backgroundColor` option.
 
 ```jsx
 // Basic
@@ -188,38 +180,42 @@ openSnackbar('Hello!', 3000)
 
 // With custom duration and background color
 openSnackbar('Error occurred', 5000, '#e53935')
+
+// Success green
+openSnackbar('Saved!', 4000, '#22c55e')
 ```
 
 #### `closeSnackbar()`
 
-This method is used if you want to close the Snackbar programmatically. It doesn't receive any params.
+Closes the snackbar programmatically. Takes no arguments.
 
 ### Options
 
-You can pass an options object to customize your Snackbar. This object can be passed either in `useSnackbar([options])` or as the second argument of `withSnackbar(Component [, options])`.
+Pass an options object to `useSnackbar([options])` or as the second argument to `withSnackbar(Component [, options])`.
 
 #### Position
 
-- **`position`**: a custom position for your Snackbar. The default value is `bottom-center`.
+- **`position`**: where the snackbar appears. Default: `center`.
 
 | Value | Description |
 | --- | --- |
+| `center` | True viewport center — scale-in animation **(default)** |
 | `top-left` | Top of viewport, left-aligned |
 | `top-center` | Top of viewport, centered |
 | `top-right` | Top of viewport, right-aligned |
 | `bottom-left` | Bottom of viewport, left-aligned |
-| `bottom-center` | Bottom of viewport, centered **(default)** |
+| `bottom-center` | Bottom of viewport, centered |
 | `bottom-right` | Bottom of viewport, right-aligned |
 
 #### Styling
 
-- **`style`**: a [style object](https://reactjs.org/docs/dom-elements.html#style) with `camelCased` properties and string values. These styles are applied to the Snackbar itself. Use `style.backgroundColor` to set a global background color for all calls.
+- **`style`**: a [style object](https://reactjs.org/docs/dom-elements.html#style) with `camelCased` properties applied to the snackbar. Use `style.backgroundColor` to set a global background color.
 
-- **`closeStyle`**: same as above, but the styles are applied to the close button. You can use font properties to style the `X` icon.
+- **`closeStyle`**: same as above, applied to the close button.
 
 #### Full Example
 
-```jsx noLines
+```jsx
 const options = {
   position: 'bottom-right',
   style: {
@@ -249,15 +245,10 @@ withSnackbar(Component, options)
 
 ## Testing
 
-> The snackbar itself is [already tested](https://github.com/codejq/react-simple-snackbar/tree/master/src/__tests__) and you don't have to worry about it.
-
-To test components that use Snackbar functionalities, there are some approaches as described below. These examples use [Jest](https://jestjs.io/) and [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/).
-
-### Testing components that use `useSnackbar()` hook
+> The snackbar itself is [already tested](https://github.com/codejq/react-simple-snackbar/tree/master/src/__tests__) — you don't need to worry about it.
 
-You can mock the implementation of `useSnackbar` to return an array containing `openSnackbar` and `closeSnackbar` as mocked functions:
+### Testing components that use `useSnackbar()`
 
-<!-- prettier-ignore -->
 ```jsx
 // Component.test.js
 import React from 'react'
@@ -265,7 +256,6 @@ import { render, fireEvent } from '@testing-library/react'
 import * as Snackbar from '@codejq/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])
@@ -273,36 +263,26 @@ jest.spyOn(Snackbar, 'useSnackbar').mockImplementation(() => [openSnackbarMock,
 it('can test the openSnackbar and closeSnackbar functions', () => {
   const { getByRole } = render(<Component />)
 
-  // Simulates click on some buttons that opens and closes the Snackbar
   fireEvent.click(getByRole('button', { name: /open/i }))
   fireEvent.click(getByRole('button', { name: /close/i }))
 
-  // 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)
 })
 ```
 
-### Testing components wrapped in `withSnackbar()` HoC
+### Testing components wrapped in `withSnackbar()`
 
-To make it easier to test and not make use of `SnackbarProvider`, you can export your component in isolation as a named export, and as a default export wrapped in `withSnackbar()`:
+Export the component as both a named export (for testing) and a default export (wrapped):
 
 ```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 `openSnackbar` and `closeSnackbar` functions as common props if you want:
+Then in tests, import the unwrapped component and pass mock props:
 
 ```jsx
 // Component.test.js
@@ -317,15 +297,10 @@ it('can test the openSnackbar and closeSnackbar functions', () => {
     <Component openSnackbar={openSnackbarMock} closeSnackbar={closeSnackbarMock} />
   )
 
-  // Simulates click on some buttons that opens and closes the Snackbar
   fireEvent.click(getByRole('button', { name: /open/i }))
   fireEvent.click(getByRole('button', { name: /close/i }))
 
-  // 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)
 })
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codejq/react-simple-snackbar",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A really simple React snackbar component",
   "main": "dist/index.js",
   "types": "./types.d.ts",