@plurid/plurid-react

plurid' for React

React implementation of plurid' to view and explore information as a 3D structure.

Install

The simplest manner to setup a "batteries included" plurid' web application is to use @plurid/generate-plurid-app

npx @plurid/generate-plurid-app

In order to setup a plurid' web application in a more specific manner, given a standard setup for a React-based web application (recommended create-react-app template), add the plurid' package

npm install @plurid/plurid-react

or

yarn add @plurid/plurid-react

add the peer dependencies

npm install \
    @plurid/elementql \
    @plurid/elementql-client-react \
    @plurid/plurid-data \
    @plurid/plurid-engine \
    @plurid/plurid-functions \
    @plurid/plurid-functions-react \
    @plurid/plurid-icons-react \
    @plurid/plurid-pubsub \
    @plurid/plurid-themes \
    @plurid/plurid-ui-components-react \
    @plurid/plurid-ui-state-react \
    @reduxjs/toolkit \
    cross-fetch \
    hammerjs \
    react \
    react-dom \
    react-redux \
    styled-components

or

yarn add \
    @plurid/elementql \
    @plurid/elementql-client-react \
    @plurid/plurid-data \
    @plurid/plurid-engine \
    @plurid/plurid-functions \
    @plurid/plurid-functions-react \
    @plurid/plurid-icons-react \
    @plurid/plurid-pubsub \
    @plurid/plurid-themes \
    @plurid/plurid-ui-components-react \
    @plurid/plurid-ui-state-react \
    @reduxjs/toolkit \
    cross-fetch \
    hammerjs \
    react \
    react-dom \
    react-redux \
    styled-components

add the types (if it is a TypeScript project)

npm install -D \
    @types/hammerjs \
    @types/react \
    @types/react-dom \
    @types/react-redux \
    @types/styled-components

or

yarn add -D \
    @types/hammerjs \
    @types/react \
    @types/react-dom \
    @types/react-redux \
    @types/styled-components

A simple, rendering-test application component, could look like

/** imports */
import React from 'react';

import {
    PluridApplication,
    PluridPlane,
} from '@plurid/plurid-react';



/** React Functional Component */
const Application: React.FC<any> = () => {
    /** plurid' planes */
    const pluridPlanes: PluridPlane[] = [
        [
            '/',
            () => (<div>Plurid' Application Plane</div>),
        ],
    ];

    /** plurid' view */
    const pluridView: string[] = [
        '/',
    ];

    /** render */
    return (
        <PluridApplication
            planes={pluridPlanes}
            view={pluridView}
        />
    );
}


export default Application;