From 2af7fa03c4490f0d164b3e04ff5ca06050af73b2 Mon Sep 17 00:00:00 2001 From: Calin Tamas Date: Thu, 1 Oct 2020 21:00:20 +0300 Subject: [PATCH] update scripts --- README.md | 50 +++++++++++++++++++----------------- package.json | 5 ++-- src/components/base/index.js | 8 +++--- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index fe6c08c0b..8b42515fa 100644 --- a/README.md +++ b/README.md @@ -7,38 +7,42 @@ An animated toast message component for React Native that can be called imperatively. ## Install + ``` yarn add react-native-toast-message ``` + ![ToastSuccess](success-toast.gif) ## Usage + ```js // root.jsx // Add the component your app root -import Toast from 'react-native-toast-message' +import Toast from 'react-native-toast-message'; const Root = () => { - return ( - Toast.setRef(ref)} /> - ) -} + return Toast.setRef(ref)} />; +}; -export default Root +export default Root; ``` Then use it anywhere in your app like this + ```js -import Toast from 'react-native-toast-message' +import Toast from 'react-native-toast-message'; Toast.show({ text1: 'Hello', text2: 'This is some something 👋' -}) +}); ``` ## API + ### `show(options = {})` + When calling the `show` method, you can use the following `options` to suit your needs. Everything is optional, unless specified otherwise. The usage of `|` below, means that only one of the values show should be used. @@ -56,14 +60,15 @@ Toast.show({ bottomOffset: 40, onShow: () => {}, onHide: () => {} -}) +}); ``` ### `hide(options = {})` + ```js Toast.hide({ onHide: () => {} -}) +}); ``` ## Customizing the toast types @@ -72,33 +77,32 @@ If you want to add custom types - or overwrite the existing ones - you can add a ```js // root.jsx -import Toast from 'react-native-toast-message' +import Toast from 'react-native-toast-message'; const toastConfig = { - 'success': (internalState) => ( + success: (internalState) => ( {internalState.text1} - + ), - 'error': () => {}, - 'info': () => {}, - 'any_custom_type': () => {} -} + error: () => {}, + info: () => {}, + any_custom_type: () => {} +}; const Root = () => { - return ( - Toast.setRef(ref)} /> - ) -} + return Toast.setRef(ref)} />; +}; -export default Root +export default Root; ``` Then just use the library as before ```js -Toast.show({ type: 'any_custom_type' }) +Toast.show({ type: 'any_custom_type' }); ``` ## Credits + The icons for the default `success`, `error` and `info` types are made by [Pixel perfect](https://www.flaticon.com/authors/pixel-perfect) from [flaticon.com](www.flaticon.com). diff --git a/package.json b/package.json index 3a15d2d3e..90d45a9cf 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,9 @@ "main": "index.js", "scripts": { "hooks:install": "node ./node_modules/husky/bin/install", - "lint": "eslint . --ext=jsx --ext=js", - "lint-staged": "lint-staged" + "lint": "./node_modules/.bin/eslint . --ext=jsx --ext=js", + "lint-staged": "./node_modules/.bin/lint-staged", + "prettier": "./node_modules/.bin/prettier . --write" }, "lint-staged": { "**/*.js": [ diff --git a/src/components/base/index.js b/src/components/base/index.js index 87ee27dfd..abe90e38f 100644 --- a/src/components/base/index.js +++ b/src/components/base/index.js @@ -26,20 +26,20 @@ const BaseToast = (props) => { - {text1 !== undefined && + {text1 !== undefined && ( {text1} - } - {text2 !== undefined && + )} + {text2 !== undefined && ( {text2} - } + )}