React Components for Amphora Data
You can see the example application here
The application deployed there is under /example in this repo.
With NPM
npm install --save react-amphora
or with Yarn
yarn add react-amphora
import * as React from 'react'
import ReactDOM from 'react-dom'
import { AmphoraProvider, createUserManager } from 'react-amphora'
import { Configuration } from 'amphoradata'
// your application
import App from './App'
// make sure to import the css
import 'react-amphora/dist/index.css'
const userManager = createUserManager({
clientId: 'your-client-id',
redirectUri: 'http://localhost:3000/#/callback'
})
const initalConfiguration = new Configuration()
ReactDOM.render(
<AmphoraProvider
userManager={userManager}
configuration={initalConfiguration}
>
<App />
</AmphoraProvider>,
document.getElementById('root')
)
To login with Amphora, you need to be able to handle the OAuth callback to your application. react-amphora
provides a component to handle this for you. When the callpath path is requested (e.g. /#/callback/
) you can render the component.
import * as React from 'react'
import { CallbackPage } from 'react-amphora'
import { userManager } from './userManager'
const App = (props: AppProps) => {
if (props.location.hash.substring(0, 10) === '#/callback') {
const rest = props.location.hash.substring(10)
return (
<CallbackPage
onSignIn={props.history.push('/')}
{...props}
userManager={userManager}
signInParams={`${rest}`}
/>
)
}
return (
<React.Fragment>
<YourApplicationComponents />
</React.Fragment>
)
}
react-amphora
uses Styled Components to apply CSS to components. You can apply your own global themes by introducing your own ThemeProvider
, or by passing a theme object into the AmphoraProvider
import { AmphoraProvider, Theme } from 'react-amphora'
const myTheme: Theme = {
colors: {
highlight: 'red',
main: 'blue',
secondary: 'green'
}
}
return (
<AmphoraProvider theme={myTheme}>
<App />
</AmphoraProvider>
)
Callbacks are provided for you to response to API events. Pass a callback function into the provider to listen to actions (from the app) and action results (from the server)
import { AmphoraProvider, Actions } from 'react-amphora'
const logAction = (action: Actions.Action) => {
console.log(action.type)
}
const logActionResult = (actionResult: Actions.ActionResult) => {
console.log(actionResult.type)
}
return (
<AmphoraProvider onAction={logAction} onActionResult={logActionResult}>
<App />
</AmphoraProvider>
)
react-amphora
uses Styled Components. It is included as a dependency.
NOTE: if you have trouble with styled components and react-native, you may need to incude a
.yarnclean
file in the root of your project.
@types/react-native
Identity Context Provider uses the React Context API to wrap the OAUTH and OIDC functionality of Amphora Data. Basically, it allows your users to login to your app with their Amphora Data account.
Amphora API Provider also uses the React Context API. This time the Amphora Data Javascript SDK is wrapped in a provider. The API provider must be the child of an Identity Context provider.
When you want to release a new pre-release version, just run these commands:
yarn version --prerelease
git push
and a new version with be published to NPM
MIT © xtellurian