rotor-react v0.0.6
rotor-react
React Components for Rotor
Install
npm install --save rotor-react
yarn add --dev rotor-react
API
Quick Start
import React from 'react'
import { RotorVideosProvider, RotorVideosButton } from 'rotor-react'
import 'rotor-react/dist/index.css'
const Example = ({ someTracks }) => {
return (
<RotorVideosProvider accessToken={'your_access_token_here'}>
{someTracks.map((track) => (
<>
<h2>{track.name}</h2>
<RotorVideosButton
artistName={track.artistName}
artworkUrl={track.artworkUrl}
audioUrl={track.audioUrl}
trackName={track.name}
trackId={track.id}
/>
</>
))}
</RotorVideosProvider>
)
}
Styles
import 'rotor-react/dist/index.css'
A stylesheet containing styles used by the library.
RotorVideosProvider
<RotorVideosProvider accessToken={'your_access_token_here'}>
...
</RotorVideosProvider>
A context that provides necessary information to other Rotor components. Any other Rotor component must be a descendant of this.
Prop | Type | Required | Info |
---|---|---|---|
accessToken | string | true | An individual user's access token |
RotorVideosButton
<RotorVideosButton
artistName={track.artistName}
artworkUrl={track.artworkUrl}
audioUrl={track.audioUrl}
trackName={track.name}
trackId={track.id}
/>
When clicked by a user, this component will open a modal allowing them to create and manage videos for an individual track. As well as the props detailed below, it also accepts the props a regular React button element would. This button is delivered unstyled, you should style it to match your site.
Prop | Type | Required | Info |
---|---|---|---|
artistName | string | true | The artist who created the track |
artworkUrl | string | true | The URL of the album artwork |
trackName | string | true | The name of the track |
audioUrl | string | true | The URL of the track's audio |
trackId | string or number | true | The ID of the track in your own database, this should be unique and static. |
Development
This repo contains both the library and an example app in the /example directory. This example app consumes the library and allows us to test it in an environment similar to that of an end user.
Running the example app
In two separate windows, run yarn start
and yarn start-example
.
Changes to the library will automatically be reflected in the example application.
You'll need to get a Rotor OAuth access token and provide it when prompted in the example app. You can then change your access token if needed by clicking the 'Set Access Token' link in the sidebar.
Rotor developers can consult the Rotor Web documentation on how to acquire a token for local development. Non-Rotor devs should use the token provided for your integration.
Testing
The unit tests can be run using yarn test
.
The linter can be run using yarn lint
.
The Cypress integration tests can be run using either yarn cypress
to open up the Cypress GUI or yarn cypress-headless
to run the tests in headless mode.
These tests communicate with the example app, so you'll need to have the example app running.
All the above testing and linting scripts can be run using the yarn test-all
script.
Deploying to NPM
NPM deploys can be triggered from this page
Ensure that the version number in the package.json
has been appropriately
updated before attempting a deploy, otherwise it will fail.
Staging and Production Test Apps
You'll need access keys from the respective backend for these to work. Non-Rotor devs will not be able to use these.
License
PRIVATE © Kanisi Ltd