react-vimeouploadr
React component for upload video to your vimeo account
This component extracted by another side-projects built with my friend, I extracted this component out because I found there are few sample code on internet about vimeo api with react/redux, so this project could be a reference for those who want to use vimeo api with react/redux.
Demo
Usage
Steps
-
Create vimeo app and get the access token (you may need to wait for couple days to get the upload permission) vimeo app register
-
You have to prepare a server for requesting vimeo api, you can do this in client side (Well, technically, you can do it on client-side but it will expose your access token to the world and that's not we want to see). Here is the server side sample code: Flask server sample code
-
Mount component and reducer to your app (Check the
app.js
andstore.js
indemo/src
foldr)component
import VimeoUploadr from 'react-vimeouploadr/lib'; // pass your server host for create video and get video link api (see the servier side code sample) <VimeoUploadr createVideoLink="http://localhost:5000/video/vimeo" getVideoLink="http://localhost:5000/video/vimeo" />;
reducer
import { vimeoUpload } from 'react-vimeouploadr/lib'; // add reducer to your store export default createStore( combineReducers({ vimeoUpload }), initialState, composedEnhancers );
app
// get props to state in component const mapStateToProps = state => ({ vimeoLink: state.vimeoUpload.vimeoLink, uploadStatus: state.vimeoUpload.uploadStatus }); DemoApp = connect(mapStateToProps, null)(DemoApp);
To-Do
- Pass api host from config
- Export final vimeo video link instead of render player directly
- Doc for api on server side
- Integrate with Storybook
- Fix test