Nero Punished Miscreants

    @kineticdata/react

    5.1.2 • Public • Published

    @kineticdata/react

    License: MIT NPM Version

    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

    Install

    npm i @kineticdata/react

    DownloadsWeekly Downloads

    24

    Version

    5.1.2

    License

    MIT

    Unpacked Size

    1.91 MB

    Total Files

    313

    Last publish

    Collaborators

    • matt.raykowski
    • ben.christenson
    • jackboespflug
    • shayne.koestler
    • kinetic-admin
    • homejames203
    • marcinzarycki