react-native-light-confirm - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "react-native-light-confirm",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A Lightweight Confirm Component for React Native",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,46 +0,82 @@
-
 # react-native-light-confirm
 
- - Super lightweight component
- - Smooth animation
- - Display one button or two buttons
- - Custom title
- - Custom button's text
- - Custom button's color
- - Event on button
- - Support both Android and iOS
+- Super lightweight component
+- Smooth animation
+- Display one button or two buttons
+- Custom title
+- Custom button's text
+- Custom button's color
+- Event on button
+- Support all orientations
+- Support both Android and iOS
 
+|                                                      iOS                                                      |                                                    Android                                                    |
+| :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: |
+| ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-light-confirm/RNLCF-IOS.gif) | ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-light-confirm/RNLCF-AOS.gif) |
+
 ## Installation
+
 ```
 npm i react-native-light-confirm --save
 ```
+
 ### or
+
 ```
 yarn add react-native-light-confirm
 ```
-## Usage
+
+## Example
+
 ```jsx
-import React, { Component } from  "react";
+import React, { Component } from "react";
 import Confirm from "react-native-light-confirm";
-.
-.
-.
 
+class Example extends Component {
+  constructor() {
+    super();
+    this.state = {
+      showConfirm: true
+    };
+  }
+
+  render() {
+    return (
+      <Confirm
+        visible={this.state.showConfirm}
+        message="Are you sure to leave this page?"
+        textPrimary="Leave"
+        colorPrimary="#FF9500"
+        colorSecondary="#1395EC"
+        onPrimary={() => console.log("onPrimary")}
+        onSecondary={() => console.log("onSecondary")}
+      />
+    );
+  }
+}
+
+export default Example;
 ```
+
 ## API Usage
-| Props | Type | Required | Description | Default |
-| -------- | ---- | -------- | ----------- | ------- |
-| visible | bool | Yes | Show Confirm or not | false |
-| background | bool | No | Display dark background when Confirm is shown| true |
-| message | string | No | Confirm's title | "Do you want to continue?" |
-| textPrimary | string | No | Text display on primary button | "Yes" |
-| colorPrimary | string | No | Color apply to primary button | "#00ACEF" |
-| onPrimary | func | No | Event on primary button | - |
-| showSecondary | bool | No | Display secondary button or not | true |
-| textSecondary | string | No | Text display on secondary button | "No" |
-| colorSecondary | String | No | Color apply to primary button | "#FA3838"|
-| onSecondary | func | No | Event on secondary button | - |
 
+| Props          | Type   | Required | Description                                   | Default                    |
+| -------------- | ------ | -------- | --------------------------------------------- | -------------------------- |
+| visible        | bool   | Yes      | Show Confirm or not                           | false                      |
+| background     | bool   | No       | Display dark background when Confirm is shown | true                       |
+| message        | string | No       | Confirm's title                               | "Do you want to continue?" |
+| textPrimary    | string | No       | Text display on primary button                | "Yes"                      |
+| colorPrimary   | string | No       | Color apply to primary button                 | "#00ACEF"                  |
+| onPrimary      | func   | No       | Event on primary button                       | -                          |
+| showSecondary  | bool   | No       | Display secondary button or not               | true                       |
+| textSecondary  | string | No       | Text display on secondary button              | "No"                       |
+| colorSecondary | String | No       | Color apply to primary button                 | "#F53D3D"                  |
+| onSecondary    | func   | No       | Event on secondary button                     | -                          |
+
+### Note
+
+Set props `visible` to `false` after you finished your task to prevent Confirm dialog shows again and again when state changed.
+
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/NYSamnang/react-native-light-confirm/blob/master/LICENSE) file for details

No alert changes

Improved metrics

Total package byte prevSize

9785

increased by25.59%

Number of lines in readme file

83

increased by76.6%

No dependency changes