Skip to content

Commit

Permalink
chore: added basic usage code to README.md (#709)
Browse files Browse the repository at this point in the history
  • Loading branch information
taeh98 authored Sep 8, 2023
1 parent 142fdea commit 9c7fd11
Show file tree
Hide file tree
Showing 3 changed files with 305 additions and 216 deletions.
62 changes: 58 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,64 @@ from [this example](https://snack.expo.dev/8mHmLfcZf).

## Usage

You can find runnable examples in the `examples` subdirectory, which is a
working [Expo](https://github.com/expo/expo) project demonstrating this library.
Navigate into the `examples` subdirectory, run `npm install`, and then run
`npx expo start` to see the examples working.
### Basic usage

The following code shows basic usage of the library:

```javascript
import React, {useState} from 'react';
import {View, Text} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

export default function App() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{label: 'Apple', value: 'apple'},
{label: 'Banana', value: 'banana'},
{label: 'Pear', value: 'pear'},
]);

return (
<View style={{flex: 1}}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 15,
}}>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
placeholder={'Choose a fruit.'}
/>
</View>

<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text>Chosen fruit: {value === null ? 'none' : value}</Text>
</View>
</View>
);
}
```

### Further information on usage

You can find more examples in the `examples` subdirectory. This subdirectory is
a working [Expo](https://github.com/expo/expo) project demonstrating this
library. It shows how to use the library with class components as well as
function components, and in TypeScript as well as in JavaScript. Navigate into
the `examples` subdirectory, run `npm install`, and then run `npx expo start` to
see the examples working.

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

0 comments on commit 9c7fd11

Please sign in to comment.