Kinetic React Developers
Overview
HomeBundle Getting StartedReact Library SetupInstallUsage
Core Components
Utility Components
Helper Functions
APIs

Getting Started

Install

Via npm

npm install @kineticdata/react

Via Yarn

yarn add @kineticdata/react

Usage

The KineticLib Provider provides a global context to your site or applications connection to the Kinetic Platform and is required in order to render components within this library.

Basic Example

Below is an example of how you would wrap your project with the KineticLib provider.

/**
 * /src/App.js
 */
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 `API` example below
const App = () => (
  <KineticLib>
    {({ initialized, loggedIn, loginProps }) => (
      <Router>
        {!initialized ? (
          <LoginLoading />
        ) : !loggedIn ? (
          <LoginScreen {...loginProps} />
        ) : (
          <Switch>
            <Route path="/" component={Space} />
            <Route path="/kapps/:kappSlug" component={Kapp} />
          </Switch>
        )}
      </Router>
    )}
  </KineticLib>
);
export default App;

Example API Usage

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;