Skip to content

Commit 9c7fd11

Browse files
authored
chore: added basic usage code to README.md (#709)
1 parent 142fdea commit 9c7fd11

File tree

3 files changed

+305
-216
lines changed

3 files changed

+305
-216
lines changed

README.md

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,64 @@ from [this example](https://snack.expo.dev/8mHmLfcZf).
2323

2424
## Usage
2525

26-
You can find runnable examples in the `examples` subdirectory, which is a
27-
working [Expo](https://github.com/expo/expo) project demonstrating this library.
28-
Navigate into the `examples` subdirectory, run `npm install`, and then run
29-
`npx expo start` to see the examples working.
26+
### Basic usage
27+
28+
The following code shows basic usage of the library:
29+
30+
```javascript
31+
import React, {useState} from 'react';
32+
import {View, Text} from 'react-native';
33+
import DropDownPicker from 'react-native-dropdown-picker';
34+
35+
export default function App() {
36+
const [open, setOpen] = useState(false);
37+
const [value, setValue] = useState(null);
38+
const [items, setItems] = useState([
39+
{label: 'Apple', value: 'apple'},
40+
{label: 'Banana', value: 'banana'},
41+
{label: 'Pear', value: 'pear'},
42+
]);
43+
44+
return (
45+
<View style={{flex: 1}}>
46+
<View
47+
style={{
48+
flex: 1,
49+
alignItems: 'center',
50+
justifyContent: 'center',
51+
paddingHorizontal: 15,
52+
}}>
53+
<DropDownPicker
54+
open={open}
55+
value={value}
56+
items={items}
57+
setOpen={setOpen}
58+
setValue={setValue}
59+
setItems={setItems}
60+
placeholder={'Choose a fruit.'}
61+
/>
62+
</View>
63+
64+
<View style={{
65+
flex: 1,
66+
alignItems: 'center',
67+
justifyContent: 'center'
68+
}}>
69+
<Text>Chosen fruit: {value === null ? 'none' : value}</Text>
70+
</View>
71+
</View>
72+
);
73+
}
74+
```
75+
76+
### Further information on usage
77+
78+
You can find more examples in the `examples` subdirectory. This subdirectory is
79+
a working [Expo](https://github.com/expo/expo) project demonstrating this
80+
library. It shows how to use the library with class components as well as
81+
function components, and in TypeScript as well as in JavaScript. Navigate into
82+
the `examples` subdirectory, run `npm install`, and then run `npx expo start` to
83+
see the examples working.
3084

3185
For further information on how to use this library,
3286
read [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage).

0 commit comments

Comments
 (0)