@rpldy/native-uploady

wrapper&context component to expose and provide react-uploady functionality for react-native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@rpldy/native-uploady
71601.1.0a month ago2 years agoMinified + gzip package size for @rpldy/native-uploady in KB

Readme

<img src="https://badge.fury.io/js/%40rpldy%2Fnative-uploady.svg" alt="npm version" height="20"></a>
<img src="https://circleci.com/gh/rpldy/react-uploady.svg?style=svg" alt="circleci status"/></a>  
<img src="https://codecov.io/gh/rpldy/react-uploady/branch/master/graph/badge.svg" alt="codecov status"/></a> 
<img src="https://badgen.net/bundlephobia/minzip/@rpldy/native-uploady" alt="bundlephobia badge"/></a>
<img src="https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg" alt="rpldy storybook"/></a> 
Native Uploady
This is the main UI package for React-Native. Its role is to initialize and expose the
uploader functionality. It contains the Provider that all other UI packages rely on.
It provides multiple hooks that enable more advanced features and data for client apps.
The difference between this package and the main Uploady is that this one doesn't use react-dom (for obvious reasons) and doesn't create a file input element.

The best place to get started is at our: React-Uploady Documentation Website

Installation

#Yarn: 
   $ yarn add @rpldy/native-uploady

#NPM:
   $ npm i @rpldy/native-uploady
``` 

## Props

This package is just about identical to the main [Uploady](../../uploady) package. 
See Props documentation in the main readme.

> All props are identical besides the ones related to file input (ex: multiple, accept, etc.), which cannot be used with the native flavor.

## Example

To be able to use one of the [UI Components](../../../README.md#ui-packages) or one of the hooks, you need to wrap them with Uploady.
This will give them access to the UploadyContext.

```javascript
import React, { useCallback } from "react";
import { View, Button } from "react-native";
import DocumentPicker from "react-native-document-picker/index";
import NativeUploady from "@rpldy/native-uploady";

const Upload = () => {

  const pickFile = useCallback(async () => {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.images],
      });

      uploadyContext.upload(res);
  }, [uploadyContext]);

    return <View>
               <Button title="Upload File" onPress={pickFile} />
          </View>;
};

const App = () => (<NativeUploady    
    grouped
    maxGroupSize={2}
    method="PUT"
    destination={{url: "https://my-server", headers: {"x-custom": "123"}}}>
    
    <Upload/>
    <RestOfMyApp/>
</NativeUploady>)

Documentation

See documentation for events/hooks and more in the main Uploady readme