Skip to content

Commit b560c95

Browse files
author
Jakub Peksa
committed
docs: update README according to new changes
1 parent be2a01a commit b560c95

File tree

3 files changed

+44
-95
lines changed

3 files changed

+44
-95
lines changed

‎README.md

Lines changed: 39 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -42,113 +42,45 @@ npm install filestack-react
4242
```
4343
then just insert into your app
4444
```jsx
45-
import ReactFilestack from 'filestack-react';
45+
import { PickerOverlay } from 'filestack-react';
4646

47-
<ReactFilestack
47+
<PickerOverlay
4848
apikey={YOUR_API_KEY}
4949
onSuccess={(res) => console.log(res)}
5050
/>
5151
```
5252
### Props
5353
| Key | Type | Required | Default | Description |
5454
|----------------------------------|---------------|----------|-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
55-
| apikey | String | true | | Filestack api key |
56-
| action | String | false | 'pick' | A method from [Client](https://filestack.github.io/filestack-js/classes/client.html) class. One of 'transform','retrieve','metadata','storeUrl','upload','remove','pick','removeMetadata','preview','logout' |
57-
| actionOptions | Object | false | | An action (client method) specific options object eg. PickerOptions, TransformOptions etc. |
58-
| componentDisplayMode | Object | | | Determines how will be wrapper component displayed |
59-
| componentDisplayMode.type | String | false | 'button' | It can be 'button', 'link' or 'immediate' |
60-
| componentDisplayMode.customText | String | false | 'Pick file' | If type is 'button' or 'link' you can set text for it |
61-
| componentDisplayMode.customClass | String | false | 'filestack-react' | If type is 'button' or 'link' you can set class for it |
62-
| onSuccess | Function | false | result => console.log(result) | A function to be called after successful completed action |
63-
| onError | Function | false | error => console.error(error) | A function to be called when error occurs |
64-
| clientOptions | Object | | | Filestack client options used for an every action |
65-
| clientOptions.cname | String | false | | Check [cname](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#cname) |
66-
| clientOptions.security | [Security](https://filestack.github.io/filestack-js/interfaces/security.html) | false | | Check [security](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#security) |
67-
| clientOptions.sessionCache | Boolean | false | | Check [sessionCache](https://filestack.github.io/filestack-js/interfaces/clientoptions.html#sessioncache) |
68-
| file | Object | false | | Use it to insert a file object for 'upload' action |
69-
| source | String | false | | Use it to pass for some actions handle or external url |
70-
| customRender | Function | false | | Use it if you need custom html structure |
55+
| apikey | String | true | | Filestack api key |
56+
| clientOptions | Object | false | | https://filestack.github.io/filestack-js/interfaces/clientoptions.html |
57+
| pickerOptions | Object | false | | https://filestack.github.io/filestack-js/interfaces/pickeroptions.html |
58+
| onSuccess | Function | false | result => console.log(result) | A function to be called after successful completed action |
59+
| onError | Function | false | error => console.error(error) | A function to be called when error occurs |
7160

7261
### Examples
73-
**Picker with custom designed button**
62+
**Render basic Overlay Picker**
7463
```jsx
75-
<ReactFilestack
76-
apikey={YOUR_API_KEY}
77-
actionOptions={PickerOptions}
78-
componentDisplayMode={{
79-
type: 'button',
80-
customText: 'Click here to open picker',
81-
customClass: 'some-custom-class'
82-
}}
83-
onSuccess={this.yourCallbackFunction}
84-
/>
64+
<PickerOverlay apikey='YOUR_APIKEY'/>
8565
```
86-
87-
**Picker with custom wrapper**
66+
**Render basic Inline Picker**
8867
```jsx
89-
<ReactFilestack
90-
apikey={YOUR_API_KEY}
91-
actionOptions={PickerOptions}
92-
customRender={({ onPick }) => (
93-
<div>
94-
<strong>Find an avatar</strong>
95-
<button onClick={onPick}>Pick</button>
96-
</div>
97-
)}
98-
onSuccess={this.yourCallbackFunction}
99-
/>
68+
<PickerInline apikey='YOUR_APIKEY'/>
10069
```
101-
102-
**Show picker directly after component is mounted**
70+
**Render basic Drop Pane Picker**
10371
```jsx
104-
<ReactFilestack
105-
apikey={YOUR_API_KEY}
106-
componentDisplayMode={{
107-
type: 'immediate'
108-
}}/>
72+
<PickerDropPane apikey='YOUR_APIKEY'/>
10973
```
11074

11175
**Show picker directly and embed it inside specific container**
11276
```jsx
113-
<ReactFilestack
114-
apikey={YOUR_API_KEY}
115-
componentDisplayMode={{
116-
type: 'immediate'
117-
}}
118-
actionOptions={{
119-
displayMode: "inline",
120-
container: "embedded"
121-
}}/>
122-
```
123-
124-
**Transformation of external url with security**
125-
```jsx
126-
<ReactFilestack
127-
apikey={YOUR_API_KEY}
128-
componentDisplayMode={{
129-
type: 'immediate'
130-
}}
131-
action='transform'
132-
actionOptions= {{
133-
resize: {
134-
width: 250
135-
},
136-
flip: true
137-
}}
138-
clientOptions={{
139-
security: {
140-
policy: 'YOUR_POLICY',
141-
signature: 'YOUR_SIGNATURE'
142-
}
143-
}}
144-
source='https://upload.wikimedia.org/wikipedia/commons/c/cf/Pears.jpg'
145-
onSuccess={(res) => console.log(res)}/>
77+
<PickerInline apikey='YOUR_APIKEY'><div className="your-container"></div></PickerInline>
14678
```
14779

14880
### filestack-js Client
14981
If you need to use Client just try
15082
```jsx
151-
import ReactFilestack, { client } from 'filestack-react';
83+
import { client } from 'filestack-react';
15284
```
15385

15486
### SSR
@@ -158,17 +90,33 @@ If you need to use filestack-react with SSR project or site generators like Gats
15890
<br>
15991
[issue65](https://github.com/filestack/filestack-react/issues/65)
16092

93+
### Migration from 3.x.x and 4.x.x
94+
95+
| 3.x.x | 4.0.0 | Comment |
96+
|----------------|----------------------------------|-------------------------------------------------------------------------------|
97+
| apikey | apikey | |
98+
| actionOptions | pickerOptions | We want to be consistent with other filestack libs |
99+
| clientOptions | clientOptions | |
100+
| onSuccess | onSuccess | |
101+
| onError | onError | |
102+
| N/A | children | Children prop will be used now in case you'll want to use specific container |
103+
| action | N/A | Default picker action will be 'pick' always |
104+
| file | N/A | Removed |
105+
| source | N/A | Removed |
106+
| customRender | N/A | Removed, from now on clients will be responsible for rendering |
107+
| componentDisplayMode | N/A | Removed, from now on clients will be responsible for rendering |
108+
161109
### Migration from 1.x.x and 2.x.x
162-
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.
110+
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.
163111
Below you will find information about what happened to each of the options available in 2.x.x :
164112

165113
| 2.x.x | 3.0.0 | Comment |
166114
|----------------|----------------------------------|-------------------------------------------------------------------------------|
167115
| apikey | apikey | |
168116
| mode | action | |
169117
| options | actionOptions | We want to emphasize that this option is associated with 'action' |
170-
| preload | N/A | Now, component is at default preloading neccessary js assets, styles, images |
171-
| file | file | |
118+
| preload | N/A | Now, component is at default preloading necessary js assets, styles, images |
119+
| file | file | |
172120
| onSuccess | onSuccess | |
173121
| onError | onError | |
174122
| options.handle | source | Handle or url used by specific action is now stored in separate prop |
@@ -184,25 +132,25 @@ Below you will find information about what happened to each of the options avail
184132

185133
## Live demo
186134
Check demo at codepen
187-
https://codepen.io/Filestack/pen/KEpVdR
135+
https://codepen.io/Filestack/pen/KEpVdR - needs to be updated for 4.0 version
188136

189137
## Development
190-
The whole componenst is located inside src/ReactFilestack.jsx
138+
All components are located inside src/picker/
191139

192140
After you add some changes just type
141+
193142
```
194143
npm run build
195144
```
196145

197146
Be sure that your change doesn't break existing tests and are compatible with linter
147+
198148
```
199149
npm run test
200-
201-
npm run lint
202150
```
203151

204152
## Documentation
205-
You can find info about avalaible options for actions (Client class methods) in
153+
You can find info about available options for actions (Client class methods) in
206154
[https://filestack.github.io/filestack-js/](https://filestack.github.io/filestack-js/)
207155

208156
## Contribution

‎example/src/App.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ const App = () => {
3939
</button>
4040
</div>
4141
<div>
42-
{isPickerDropPaneVisible && <PickerDropPane apikey='x'/>}
43-
{isPickerInlineVisible && <PickerInline apikey='x'/>}
44-
{isPickerOverlayVisible && <PickerOverlay apikey='x'/>}
42+
{isPickerDropPaneVisible && <PickerDropPane apikey='YOUR_APIKEY'/>}
43+
{isPickerInlineVisible && <PickerInline apikey='YOUR_APIKEY'/>}
44+
{isPickerOverlayVisible && <PickerOverlay apikey='YOUR_APIKEY'/>}
4545
</div>
4646
</div>
4747
);

‎src/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PickerOverlay from './picker/picker-overlay';
22
import PickerInline from './picker/picker-inline';
33
import PickerDropPane from './picker/picker-drop-pane';
4+
import * as client from 'filestack-js';
45

5-
export { PickerOverlay, PickerInline, PickerDropPane };
6+
export { PickerOverlay, PickerInline, PickerDropPane, client };

0 commit comments

Comments
 (0)