@kineticdata/react
A reactJS library that makes it super simple to interact with the Kinetic Platform within your sites and applications.
Docs
Embedded in the React component library is an interactive styleguide and documentation system that allows you to see the components and manipulate them.
Run and View Docs Locally
To use this styleguide simply run yarn start
and connect to http://localhost:8000
.
Install
Via npm
npm install @kineticdata/react
Via Yarn
yarn add @kineticdata/react
Quick Start
KineticLib
The KineticLib
Provider provides a global context to your site or applications connection to the Kinetic Platform.
import React from 'react';
import { KineticLib } from '@kineticdata/react';
import { Router, Route, Switch } from 'react-router-dom';
import Space from './Space';
import Kapp from './Kapp'; // @see the Kapp component defined in `Kapp` example below
export const clientId =
process.env.NODE_ENV === 'development'
? 'kinetic-bundle-dev'
: 'kinetic-bundle';
const App = () => (
<KineticLib clientId={clientId}>
{({ loggedIn, loggingIn, loginProps }) => (
<Router>
{loggingIn ? (
<LoginLoading />
) : !loggedIn ? (
<LoginScreen {...loginProps} />
) : (
<Switch>
<Route path="/" component={Space} />
<Route path="/kapps/:kappSlug" component={Kapp} />
</Switch>
)}
</Router>
)}
</KineticLib>
);
export default App;
API's
All Service API's are exposed as functions to perform CRUD operations within the platform.
import React from 'react';
import { fetchKapp } from '@kineticdata/react';
class Kapp extends React.Component {
constructor(props) {
super(props);
this.state = { kapp: {} };
}
componentDidMount() {
const { kapp } = fetchKapp(this.props.kappSlug, {
include: 'details,forms',
});
this.setState({ kapp });
}
render() {
const { kapp } = this.state;
return (
<div>
<h1>{kapp.slug}</h1>
<ul>
{kapp.forms.map(form => (
<li>{form.name}</li>
))}
</ul>
</div>
);
}
}
export default Kapp;
Development / Contributing
See the Contributing page for information on developing the component library.
License
MIT © Kinetic Data