npm: possibly marvellous

    @bbp/react-nexus
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.15 • Public • Published

    Nexus Sdk logo

    @bbp/react-nexus

    Coverage Status Downloads Version License Follow on Twitter

    A set of React components for Nexus

    Usage

    Install:

    npm i @bbp/react-nexus @bbp/nexus-sdk

    Wrap your App with the Provider

    import React from 'react';
    import { render } from 'react-dom';
    import { NexusProvider } from '@bbp/react-nexus';
    import { createNexusClient } from '@bbp/nexus-sdk';
    
    const nexus = createNexusClient({
      uri: 'https://sandbox.bluebrainnexus.io/v1',
    });
    
    const rootElement = document.getElementById('root');
    render(
      <NexusProvider nexusClient={nexus}>
        <App />
      </NexusProvider>,
      rootElement,
    );

    Use the useNexus hook to call your nexus client instance:

    import { useNexus } from '@bbp/react-nexus';
    import { OrganizationList, ListOrgOptions } from '@bbp/nexus-sdk';
    
    const ListOrg = ({ options }: { options?: ListOrgOptions }) => {
      const state = useNexus<OrganizationList>(nexus =>
        nexus.Organization.list(options),
      );
    
      if (state.loading) {
        return <p>Loading Organization...</p>;
      }
      if (state.error) {
        return <p>An error occurred: {state.error.reason}</p>;
      }
      return state.data._results.map(org => <p>{org._label}</p>);
    };
    
    <ListOrg deprecated={true} />

    useNexus hook uses the default react's useEffect so you can pass a list of values to watch in order to automatically refresh a new state:

    const GetOrg = ({ orgLabel }: { orgLabel: String }) => {
      const state = useNexus(nexus => nexus.Organization.get(orgLabel), [orgLabel]);
      return children({ ...state });
    };
    
    const App = () => {
      const [orgLabel, setOrgLabel] = React.useState("defaultOrg");
      return (
        <>
          <input name="org-label" onChange={e => setOrgLabel(e.target.value)} />
          <GetOrg orgLabel={orgLabel}>
            {({ data, loading, error }) => {
              if (loading) {
                return <p>Loading Organization...</p>;
              }
              if (error) {
                return <p>An error occurred loading your the organization {orgLabel}: {error.reason}</p>;
              }
              return (<p>{data._label}</p>);
            }}
          </GetOrg>
        </>
      );
    }

    You can also directly get the instance of the nexus client from the context:

    import { useNexusContext } from '@bbp/react-nexus';
    
    const Component = () => {
      const nexus = useNexusContext();
    
      // use it the way you want here
      // nexus.Organization.list().then().catch()....
    }

    There are some very handy components too:

    import { AccessControl } from '@bbp/react-nexus';
    
    const RenderBasedOnPermission = () => (
      <AccessControl
        permissions={["projects/read", "resources/write"]}
        path="/org"
        noAccessComponent={(missingPerms) => <NoAccess />}
        loadingComponent={<p>Loading...</p>}
      >
        <Access />
      </AccessControl>
    )

    Install

    npm i @bbp/react-nexus

    DownloadsWeekly Downloads

    9

    Version

    1.3.15

    License

    Apache-2.0

    Unpacked Size

    132 kB

    Total Files

    168

    Last publish

    Collaborators

    • bbpadministrator
    • bbp-nexus