Parkgate IO Hooks

Library for Parkgate IO plaform integration for a Developer Application

Parkgate IO Hooks is a frontend side library used for applications rendered on the Parkgate IO Platform. Using a React Hooks API, implementers have access to features provided by the platform.

Features

• Get initial state of application
• Listen to changes in application window dimensions
• Communicate with shared data accross multiple associated applications on a board
• More features coming soon!

Install

npm install --save parkgate-io-hooks

Parkgate IO Provider

The ParkgateProvider should be placed at the root of the application. Internaly using the React Context API, the provider manages the data-flow of the application. Parkgate IO Hooks must be instantiated inside components nested within the ParkgateProvider and not the same component.

Once an application is wrapped in the provider, the application will be not render useless within the Parkgate IO Platform experience. A developer testing evironment is still in development and will be posted soon. Stay tuned!

Usage

// Root of your application
import React from 'react';

import { ParkgateProvider } from 'parkgate-io-hooks';

const App = () => {
    return (
        <ParkgateProvider>
            <MyComponent />
        </ParkgateProvider>
    );
};
export default App;

Hooks API

Parkgate IO features can be accessed by Parkgate IO Hooks. Hooks are only valid in components nested within the root ParkgateProvider.

useParkgateData

Returns configuration data of the application; used to specify initial state of the application

Usage

import React from 'react'

import { useParkgateData } from 'parkgate-io-hooks'

const MyComponent = () => {
    const data = useParkgateData();
    return <p> {JSON.stringify(data)} </p>;
}
export default MyComponent;

Returns: Object (key/value data specified in application config)

useParkgateDimensions

Returns dimension properties updated on screen resize

Usage

import React from 'react';

import { useParkgateDemensions } from 'parkgate-io-hooks';

const MyComponent = () => {
    const {
        shape,
        width,
        height,
    } = useParkgateDemensions();
    
    return <p> Shape: {shape}, Width: {width}, Height: {height} </p>;
}
export default MyComponent;

Returns Object (Dimensions Schema)

| Property | Type | Description | Values | | --- | --- | --- | --- | | shape | String | String representation of current shape of the application window. possibly used as a class name for style logic. | large-square, small-square, horizontal-rectangle, vertical-rectangle, modal-square, fullscreen | | width | number | Parkgate width unit representing a multiple of 90px | 3 (small) or 5(large) or 7 (modal) or null (fullscreen) | | height | number | Parkgate height unit representing a multiple of 90px | 3 (small) or 5(large) or 7 (modal) or null (fullscreen) |

useParkgateStore

Applications on the Parkgate platform can share data amongst themselves using registered stores. You application can access and update the shared value using this hook. The desired store is indexed using the registered store key. It follows the same api as the useState hook.

Usage

import React from 'react';

import { useParkgateStore } from 'parkgate-io-hooks';

const MyComponent = () => {
    // Indexes the registered store `Count`
    // Similar API to `useState`
    const [
        count,
        setCount,
     ] = useParkgateStore('count');

     const incrementCount => () => {
         setCount(count++);
     };
    
    return (
        <>
            <p> Count {count}</p>
            <button onClick={incrementCount.bind(this)}>Increment</button>
        </>
    );
}
export default MyComponent;

Parameters

| Name | Type | Description | | --- | --- | --- | | StoreKey | String | Used the index the sprecific store registered with this application to display or modify its state |

Returns Array<StoreValue, SetStoreFunction>

| Array Index | Name | Description | Value | | --- | --- | --- | --- | | 0 | Store Value | The value stored in the specified shared store | any | | 1 | Set Store Function | A function that updates the shared store state | Function<any> |

finishParkgateProcess

Nested applications or Modal applications can close themselves by calling the provided function. The parameter provided to this function passes a return value of the experience to the parkgate platform. This function is not effective if called in a board application instance.

Usage

import React from 'react';

import { finishParkgateProcess } from 'parkgate-io-hooks';

const MyComponent = () => {
    let computedValue = 42

     const closeApplication = () => {
         finishParkgateProcess(42);
     };
    
    return <button onClick={closeApplication}>Close</button>;
}
export default MyComponent;

Parameters

| Name | Type | Description | | --- | --- | --- | | ReturnValue | Any | The final value returned by the application instance before the closure of the application is initiated. |

Returns undefined

License

MIT © ParkgateIO

This hook is created using create-react-hook.