Skip to content

Commit a8ae20f

Browse files
committed
docs: update Readme
1 parent 34040af commit a8ae20f

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
Generate react-native pickers with range numbers.
77

8+
## Example
9+
<img src="https://i.ibb.co/0GkCZnz/ezgif-3-f565f85e890a.gif" alt="ezgif-3-f565f85e890a" width="300px" border="0">
10+
811
## Install
912

1013
```bash
@@ -16,6 +19,7 @@ yarn add react-native-number-please
1619
```javascript
1720
import React from "react";
1821
import { View, Text } from "react-native";
22+
1923
import NumberPlease from "react-native-number-please";
2024

2125
const OrderPizza = () => {
@@ -35,3 +39,37 @@ const OrderPizza = () => {
3539
);
3640
};
3741
```
42+
43+
```javascript
44+
import React from "react";
45+
import { View, Text } from "react-native";
46+
47+
import NumberPlease from "react-native-number-please";
48+
49+
const ItsYourBirthday = () => {
50+
const initialBirthday = [
51+
{ id: "day", value: 16 },
52+
{ id: "month", value: 4 },
53+
{ id: "year", value: 1970 },
54+
];
55+
56+
const [birthday, setBirtday] = useState(initialBirthday);
57+
58+
const date = [
59+
{ id: "day", label: "", min: 0, max: 31 },
60+
{ id: "month", label: "", min: 0, max: 12 },
61+
{ id: "year", label: "", min: 1900, max: new Date().getFullYear()
62+
},
63+
64+
return (
65+
<View>
66+
<Text>My birthday</Text>
67+
<NumberPlease
68+
digits={date}
69+
values={birthday}
70+
onChange={(values) => setBirtday(values)}
71+
/>
72+
</View>
73+
);
74+
};
75+
```

0 commit comments

Comments
 (0)