react-hook-popup - npm Package Compare versions

Comparing version 0.0.5-alpha.4 to 0.0.5-alpha.5

dist/components/Snackbar/SnackBar.js

@@ -26,3 +26,3 @@ "use strict";
 var DEFAULT_VARIANT = 'info';
-var DEFAULT_TIMEOUT = 4000;
+var DEFAULT_TIMEOUT = 5000;
 var SnackBar = function (_a) {
@@ -29,0 +29,0 @@ var children = _a.children, handleClose = _a.handleClose, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, _c = _a.timeout, timeout = _c === void 0 ? DEFAULT_TIMEOUT : _c;

package.json

 {
   "name": "react-hook-popup",
-  "version": "0.0.5-alpha.4",
+  "version": "0.0.5-alpha.5",
   "description": "Easily manage popups like alerts and modals in React with a single hook",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/aidanjw1/react-hook-popup#readme",

README.md

@@ -11,5 +11,3 @@ # React Hook Popup
 
-## Usage
-
-### Basic Usage
+## Basic Usage
 React Hook Popup is completely centered around one single, simple to use hook: `usePopup`. It can be imported like
@@ -36,3 +34,3 @@
 
-The hook returns a function to show that popup, and a function to it.
+The hook __returns a function to show that popup__, and a function to it.
 
@@ -53,3 +51,3 @@ ```javascript
 
-### Render Props
+## Render Props
 In a style similar to the [render props pattern](https://reactjs.org/docs/render-props.html), the function that renders the popup provides access to a few utility values and functions that can be used within the popup to make it more dynamic. These include
@@ -75,1 +73,89 @@
 ```
+
+## Reusability
+Popups created through the `usePopup` hook can be easily defined once and shared accross the entire application by writing your own custom hooks. For example, you could create your own `useAlert` and import it everywhere to get access to that alert.
+```javascript
+// useAlert.jsx
+export function useAlert('alert', ({ message, handleClose }) => (
+    // ...your alert JSX
+));
+```
+```javascript
+// SomeComponent.jsx
+import { useAlert } from 'useAlert';
+
+export const SomeComponent = () => {
+    const [alert] = useAlert();
+    return (
+        <button onClick={() => alert('hello')}>Alert</button>
+    );
+};
+```
+```javascript
+// SomeOtherComponent.jsx
+import { useAlert } from 'useAlert';
+
+export const SomeOtherComponent = () => {
+    const [alert] = useAlert();
+    return (
+        <button onClick={() => alert('world!')}>Alert</button>
+    );
+};
+```
+
+## UI Component Library Integration
+Using `react-hook-popup` with any 3rd party component library, such as [material-ui](), [react-bootstrap](), or [semantic-ui](), is incredibly simple! Because it gives you the ability to render whatever JSX you want for the popup, you can simply render a 3rd party component. For example...
+```javascript
+import { Snackbar } from '@material-ui/core';
+import { usePopup } from 'react-hook-popup';
+```
+```javascript
+const [alert] = usePopup('snackbar-alert', ({ message, handleClose }), () => (
+    <Snackbar open autoHideDuration={6000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="success">
+            This is a success message!
+        </Alert>
+    </Snackbar>
+));
+```
+_*Note that any UI components you use should be set to open, because `react-hook-popup` manages the display state for you._
+
+## Built In Popups
+`react-hook-popup` provides a couple of simple, lightweight built in popups that you can import quickly without having to define any JSX or styling yourslef. These popups can be imported as hooks, and include
+
+- `useSnackBar`
+    ```javascript
+    import { useSnackBar } from 'react-hook-popup';
+
+    // ...
+
+    const [showSnackbar] = useSnackBar();
+
+    // ...
+
+    showSnackBar('There was an error!');
+    ```
+    This hook can also take an optional options argument, which is an object including the fields
+
+    `key: string` : override the default internal key used by the hook if necessary
+
+    `variant: 'error' | success' | 'info' | 'warning'` : pre defined styling to apply to the snackbar (DEFAULT: `'info'`)
+
+    `timeout: number` : milliseconds to timeout and close the alert automatically. (DEFAULT: `5000`)
+
+---
+
+- `useAlert`
+    ```javascript
+    import { useAlert } from 'react-hook-popup';
+
+    // ...
+
+    const [alert] = useAlert();
+
+    // ...
+
+    alert('There was an error!');
+    ```
+
+---

No alert changes

Improved metrics

Total package byte prevSize

25104

increased by12.4%

Lines of code

471

increased by0.21%

Number of lines in readme file

158

increased by119.44%

No dependency changes