Repository files navigation

React component which allow you to easily integrate powerful filestack-api into your app.

Table of Contents

• Overview
• Usage
  • Props
  • Examples
  • filestack-js Client
  • SSR
  • Migration from 3.x.x and 4.x.x
  • Migration from 1.x.x and 2.x.x
• Live demo
• Development
• Documentation
• Contribution
• Future

filestack-react is a wrapper onfilestack-js sdk which allow you to integrate with Filestack service in just a few lines of code. Almost all you can do withfilestack-js you can do with this component.

Install it through NPM

npm install filestack-react

then just insert into your app

import{PickerOverlay}from'filestack-react';<PickerOverlayapikey={YOUR_API_KEY}onSuccess={(res)=>console.log(res)}onUploadDone={(res)=>console.log(res)}/>

Render basic Overlay Picker

<PickerOverlayapikey='YOUR_APIKEY'/>

Render basic Inline Picker

<PickerInlineapikey='YOUR_APIKEY'/>

Render basic Drop Pane Picker

<PickerDropPaneapikey='YOUR_APIKEY'/>

Show picker directly and embed it inside specific container

<PickerInlineapikey='YOUR_APIKEY'><divclassName="your-container"></div></PickerInline>

If you need to use Client just try

import{client}from'filestack-react';

If you need to use filestack-react with SSR project or site generators like Gatsby check some workarounds in this issues
issue57
issue65

One of the changes introduced in the new version are rethinked props that the component accepts, so that the use of the component is as straightforward as possible.Below you will find information about what happened to each of the options available in 2.x.x :

Check demo at codepenhttps://codepen.io/Filestack/pen/KEpVdR - needs to be updated for 4.0 version

All components are located inside src/picker/

After you add some changes just type

npm run build

Be sure that your change doesn't break existing tests and are compatible with linter

npm run test

You can find info about available options for actions (Client class methods) inhttps://filestack.github.io/filestack-js/

Any your contributions or ideas are more than welcome.Please consider that we follow the conventional commits specification to ensure consistent commit messages and changelog formatting.

Current ideas:

• Better support for SSR, static site generator and isomorphic apps