mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-29 13:00:18 +00:00
add basic @uppy/react-native docs
This commit is contained in:
parent
591b552678
commit
fcc42437c0
2 changed files with 98 additions and 0 deletions
98
website/src/docs/react-native.md
Normal file
98
website/src/docs/react-native.md
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
title: "React Native"
|
||||
type: docs
|
||||
permalink: docs/react/native/
|
||||
order: 7
|
||||
category: 'React'
|
||||
---
|
||||
|
||||
⚠️ In Beta
|
||||
|
||||
`@uppy/react-native` is a basic Uppy component for React Native with Expo. It is in Beta, and is not full-featured. You can select local images or videos, take a picture with a camera or add any file from a remote url with Uppy Companion.
|
||||
|
||||
<img width="400" src="/images/2019-04-11-react-native-ui-1.png">
|
||||
|
||||
## Installation
|
||||
|
||||
Install from NPM:
|
||||
|
||||
```shell
|
||||
npm install @uppy/react-native
|
||||
```
|
||||
|
||||
```js
|
||||
import UppyFilePicker from '@uppy/react-native'
|
||||
|
||||
render () {
|
||||
<UppyFilePicker
|
||||
uppy={this.uppy}
|
||||
show={this.state.isFilePickerVisible}
|
||||
onRequestClose={this.hideFilePicker}
|
||||
companionUrl="https://server.uppy.io" />
|
||||
}
|
||||
```
|
||||
|
||||
## Initializing Uppy
|
||||
|
||||
Your Uppy instance must be initialized before passing it to an `uppy={}` prop, and should be cleaned up using `uppy.close()` when you are done with it. A simple approach is to initialize it in your React component's `constructor()` and destroy it in `componentWillUnmount()`.
|
||||
|
||||
> ⚠ Uppy instances are stateful, so the same instance must be used across different renders.
|
||||
> Do **NOT** initialize Uppy in a `render()` method!
|
||||
> Do **NOT** initialize Uppy in a function component!
|
||||
|
||||
```js
|
||||
class MyComponent extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
isFilePickerVisible: false
|
||||
}
|
||||
this.uppy = Uppy()
|
||||
.use(Transloadit, {})
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.uppy.close()
|
||||
}
|
||||
|
||||
showFilePicker () {
|
||||
this.setState({
|
||||
isFilePickerVisible: true
|
||||
})
|
||||
}
|
||||
|
||||
hideFilePicker () {
|
||||
this.setState({
|
||||
isFilePickerVisible: false
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
return <UppyFilePicker
|
||||
show={this.state.isFilePickerVisible}
|
||||
uppy={this.uppy}
|
||||
onRequestClose={this.hideFilePicker}
|
||||
companionUrl="https://companion.uppy.io" />
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
The `<UppyFilePicker>` component supports the following props:
|
||||
|
||||
### uppy
|
||||
|
||||
The uppy instance. Initialize in constructor, add all the nessesary plugins, set up event listeners, before passing as a prop.
|
||||
|
||||
### show
|
||||
|
||||
Boolean — the `<UppyFilePicker>` modal component will be rendered when set to `true`.
|
||||
|
||||
### onRequestClose
|
||||
|
||||
A callback that’s called when a file is picked or a “close” button is pressed. Use it to hide `<UppyFilePicker>`, like in the example above.
|
||||
|
||||
### companionUrl
|
||||
|
||||
[Uppy Companion](/docs/companion/) url.
|
||||
BIN
website/src/images/2019-04-11-react-native-ui-1.png
Normal file
BIN
website/src/images/2019-04-11-react-native-ui-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Loading…
Add table
Add a link
Reference in a new issue