Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
on2air-filestack-react
Advanced tools
Changelog
Readme
React component which allow you to easily integrate powerful filestack-api into your app.
Table of Contents
filestack-react is a wrapper on 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 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';
<PickerOverlay
apikey={YOUR_API_KEY}
onSuccess={(res) => console.log(res)}
/>
Key | Type | Required | Default | Description |
---|---|---|---|---|
apikey | String | true | Filestack api key | |
clientOptions | Object | false | https://filestack.github.io/filestack-js/interfaces/clientoptions.html | |
pickerOptions | Object | false | https://filestack.github.io/filestack-js/interfaces/pickeroptions.html | |
onSuccess | Function | false | result => console.log(result) | A function to be called after successful completed action |
onError | Function | false | error => console.error(error) | A function to be called when error occurs |
Render basic Overlay Picker
<PickerOverlay apikey='YOUR_APIKEY'/>
Render basic Inline Picker
<PickerInline apikey='YOUR_APIKEY'/>
Render basic Drop Pane Picker
<PickerDropPane apikey='YOUR_APIKEY'/>
Show picker directly and embed it inside specific container
<PickerInline apikey='YOUR_APIKEY'><div className="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
3.x.x | 4.0.0 | Comment |
---|---|---|
apikey | apikey | |
actionOptions | pickerOptions | We want to be consistent with other filestack libs |
clientOptions | clientOptions | |
onSuccess | onSuccess | |
onError | onError | |
N/A | children | Children prop will be used now in case you'll want to use specific container |
action | N/A | Default picker action will be 'pick' always |
file | N/A | Removed |
source | N/A | Removed |
customRender | N/A | Removed, from now on clients will be responsible for rendering |
componentDisplayMode | N/A | Removed, from now on clients will be responsible for rendering |
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 :
2.x.x | 3.0.0 | Comment |
---|---|---|
apikey | apikey | |
mode | action | |
options | actionOptions | We want to emphasize that this option is associated with 'action' |
preload | N/A | Now, component is at default preloading necessary js assets, styles, images |
file | file | |
onSuccess | onSuccess | |
onError | onError | |
options.handle | source | Handle or url used by specific action is now stored in separate prop |
options.url | source | Handle or url used by specific action is now stored in separate prop |
security | clientOptions.security | Options used to initialize filestack client are now grouped in ‘clientOptions’ |
buttonText | componentDisplayMode.customText | Use componentDisplayMode option (see examples) |
buttonClass | componentDisplayMode.customClass | Use componentDisplayMode option (see examples) |
cname | clientOptions.cname | Options used to initialize filestack client are now grouped in ‘clientOptions’ |
sessionCache | clientOptions.sessionCache | Options used to initialize filestack client are now grouped in ‘clientOptions’ |
render | customRender | |
children | N/A | Use customRender instead |
Check demo at codepen https://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) in https://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:
FAQs
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.
The npm package on2air-filestack-react receives a total of 0 weekly downloads. As such, on2air-filestack-react popularity was classified as not popular.
We found that on2air-filestack-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.