A reactJS library that makes it super simple to interact with the Kinetic Platform within your sites and applications.
Embedded in the React component library is an interactive styleguide and documentation system that allows you to see the components and manipulate them.
To use this styleguide simply run yarn start
and connect to http://localhost:8000
.
Via npm
npm install @kineticdata/react
Via Yarn
yarn add @kineticdata/react
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;
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;
See the Contributing page for information on developing the component library.
MIT © Kinetic Data