{"id":21214783,"url":"https://github.com/filestack/filestack-react","last_synced_at":"2025-05-15T08:09:58.617Z","repository":{"id":40499236,"uuid":"84436742","full_name":"filestack/filestack-react","owner":"filestack","description":"Official React component for Filestack - API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.","archived":false,"fork":false,"pushed_at":"2025-03-31T13:25:14.000Z","size":10632,"stargazers_count":167,"open_issues_count":38,"forks_count":41,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-07T03:38:57.300Z","etag":null,"topics":["filestack","react","transformations","transforming-files","upload","upload-file","upload-images"],"latest_commit_sha":null,"homepage":"https://www.filestack.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filestack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-09T11:55:06.000Z","updated_at":"2025-04-05T05:08:10.000Z","dependencies_parsed_at":"2024-06-18T14:04:03.724Z","dependency_job_id":"bf891879-b916-4a1b-b9bf-4e37b31bb826","html_url":"https://github.com/filestack/filestack-react","commit_stats":{"total_commits":131,"total_committers":20,"mean_commits":6.55,"dds":0.7099236641221374,"last_synced_commit":"dcb81fbf07b406837cf9e78bbcac93f12d2f989f"},"previous_names":["filestack/react-filestack"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filestack%2Ffilestack-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filestack","download_url":"https://codeload.github.com/filestack/filestack-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248869443,"owners_count":21174871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filestack","react","transformations","transforming-files","upload","upload-file","upload-images"],"created_at":"2024-11-20T21:30:52.230Z","updated_at":"2025-04-14T11:23:36.179Z","avatar_url":"https://github.com/filestack.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"logo.svg\" align=\"center\" width=\"80\"/\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n filestack-react\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n React component which allow you to easily integrate powerful filestack-api into your app.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://travis-ci.org/filestack/filestack-react\"\u003e\n \u003cimg src=\"https://travis-ci.org/filestack/filestack-react.svg?branch=master\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://npmjs.com/package/filestack-react\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/filestack-react.svg\" /\u003e\n \u003c/a\u003e\n \u003cimg src=\"https://img.shields.io/bundlephobia/min/filestack-react.svg\" /\u003e\n \u003cbr\u003e\n \u003cimg src=\"https://badges.herokuapp.com/browsers?labels=none\u0026googlechrome=latest\u0026firefox=latest\u0026microsoftedge=latest\u0026iexplore=11\u0026safari=latest\u0026iphone=latest\" /\u003e\n\u003c/p\u003e\n\u003chr\u003e\n\n**Table of Contents**\n- [Overview](#overview)\n- [Usage](#usage)\n - [Props](#props)\n - [Examples](#examples)\n - [filestack-js Client](#filestack-js-client)\n - [SSR](#ssr)\n - [Migration from 3.x.x and 4.x.x](#migration-from-3xx-and-4xx)\n - [Migration from 1.x.x and 2.x.x](#migration-from-1xx-and-2xx)\n- [Live demo](#live-demo)\n- [Development](#development)\n- [Documentation](#documentation)\n- [Contribution](#contribution)\n- [Future](#future)\n\n## Overview\nfilestack-react is a wrapper on [filestack-js](https://github.com/filestack/filestack-js) sdk which allow you to integrate with Filestack service in just a few lines of code. Almost all you can do with [filestack-js](https://filestack.github.io/filestack-js/index.html) you can do with this component.\n\n## Usage\nInstall it through NPM\n```bash\nnpm install filestack-react\n```\nthen just insert into your app\n```jsx\nimport { PickerOverlay } from 'filestack-react';\n\n\u003cPickerOverlay\n apikey={YOUR_API_KEY}\n onSuccess={(res) =\u003e console.log(res)}\n onUploadDone={(res) =\u003e console.log(res)}\n/\u003e\n```\n### Props\n| Key | Type | Required | Default | Description |\n|----------------------------------|---------------|----------|-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| apikey | String | true | | Filestack api key |\n| clientOptions | Object | false | | https://filestack.github.io/filestack-js/interfaces/clientoptions.html |\n| pickerOptions | Object | false | | https://filestack.github.io/filestack-js/interfaces/pickeroptions.html |\n| @deprecated onSuccess | Function | false | result =\u003e console.log(result) | A function to be called after successful completed action |\n| onUploadDone | Function | false | result =\u003e console.log(result) | Called when all files have been uploaded |\n| onError | Function | false | error =\u003e console.error(error) | A function to be called when error occurs |\n| onError | Function | false | error =\u003e console.error(error) | A function to be called when error occurs |\n\n### Examples\n**Render basic Overlay Picker**\n```jsx\n\u003cPickerOverlay apikey='YOUR_APIKEY'/\u003e\n```\n**Render basic Inline Picker**\n```jsx\n\u003cPickerInline apikey='YOUR_APIKEY'/\u003e\n```\n**Render basic Drop Pane Picker**\n```jsx\n\u003cPickerDropPane apikey='YOUR_APIKEY'/\u003e\n```\n\n**Show picker directly and embed it inside specific container**\n```jsx\n\u003cPickerInline apikey='YOUR_APIKEY'\u003e\u003cdiv className=\"your-container\"\u003e\u003c/div\u003e\u003c/PickerInline\u003e\n```\n\n### filestack-js Client\nIf you need to use Client just try\n```jsx\nimport { client } from 'filestack-react';\n```\n\n### SSR\nIf you need to use filestack-react with SSR project or site generators like Gatsby check some workarounds in this issues\n\u003cbr\u003e\n[issue57](https://github.com/filestack/filestack-react/issues/57)\n\u003cbr\u003e\n[issue65](https://github.com/filestack/filestack-react/issues/65)\n\n### Migration from 3.x.x and 4.x.x\n\n| 3.x.x | 4.0.0 | Comment |\n|----------------|----------------------------------|-------------------------------------------------------------------------------|\n| apikey | apikey | |\n| actionOptions | pickerOptions | We want to be consistent with other filestack libs |\n| clientOptions | clientOptions | |\n| onSuccess | onSuccess | |\n| onError | onError | |\n| N/A | children | Children prop will be used now in case you'll want to use specific container |\n| action | N/A | Default picker action will be 'pick' always |\n| file | N/A | Removed |\n| source | N/A | Removed |\n| customRender | N/A | Removed, from now on clients will be responsible for rendering |\n| componentDisplayMode | N/A | Removed, from now on clients will be responsible for rendering |\n\n### Migration from 1.x.x and 2.x.x\nOne 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.\nBelow you will find information about what happened to each of the options available in 2.x.x :\n\n| 2.x.x | 3.0.0 | Comment |\n|----------------|----------------------------------|-------------------------------------------------------------------------------|\n| apikey | apikey | |\n| mode | action | |\n| options | actionOptions | We want to emphasize that this option is associated with 'action' |\n| preload | N/A | Now, component is at default preloading necessary js assets, styles, images |\n| file | file | |\n| onSuccess | onSuccess | |\n| onError | onError | |\n| options.handle | source | Handle or url used by specific action is now stored in separate prop |\n| options.url | source | Handle or url used by specific action is now stored in separate prop |\n| security | clientOptions.security | Options used to initialize filestack client are now grouped in ‘clientOptions’ |\n| buttonText | componentDisplayMode.customText | Use componentDisplayMode option (see examples) |\n| buttonClass | componentDisplayMode.customClass | Use componentDisplayMode option (see examples) |\n| cname | clientOptions.cname | Options used to initialize filestack client are now grouped in ‘clientOptions’ |\n| sessionCache | clientOptions.sessionCache | Options used to initialize filestack client are now grouped in ‘clientOptions’ |\n| render | customRender | |\n| children | N/A | Use customRender instead |\n\n\n## Live demo\nCheck demo at codepen\nhttps://codepen.io/Filestack/pen/KEpVdR - needs to be updated for 4.0 version\n\n## Development\nAll components are located inside src/picker/\n\nAfter you add some changes just type\n\n```\nnpm run build\n```\n\nBe sure that your change doesn't break existing tests and are compatible with linter\n\n```\nnpm run test\n```\n\n## Documentation\nYou can find info about available options for actions (Client class methods) in\n[https://filestack.github.io/filestack-js/](https://filestack.github.io/filestack-js/)\n\n## Contribution\nAny your contributions or ideas are more than welcome.\nPlease consider that we follow the conventional commits specification to ensure consistent commit messages and changelog formatting.\n\n## Future\n\nCurrent ideas:\n- Better support for SSR, static site generator and isomorphic apps\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilestack%2Ffilestack-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilestack%2Ffilestack-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilestack%2Ffilestack-react/lists"}