Reach Components

The app provides three packages that expose components and functions provided by Reach.

Component library#

@livetiles/reach-components-react

With this package you can use the same components as are exposed via the official Reach component library. Please refer to the component library documentation and https://www.npmjs.com/package/@livetiles/reach-components-react for more details.

In contrast to using the component library outside of Reach you do not need to wrap everything within a ReachContext. Since you already are within Reach.

Let's imagine you want to render a specific page from Reach in your plugin. This would simply work like this:

import { FC } from 'react';
import { PageDetail } from '@livetiles/reach-components-react';
import { PluginProps } from '@reach/core';

export const HelloWorld: FC<PluginProps> = () => {
  return (
    <div>
      <PageDetail itemId="333666" />
    </div>
  );
};

Reach Core & Reach Chrome#

@reach/core
@reach/chrome

These two packages are not real npm packages, instead they are provided by the Reach Web App and injected at runtime. There are Typescript type definitions that describe the content of the two packages. These are added via the npm package @livetiles/reach-plugin-types.

While @reach/core offers you a lot of helper methods and some basic components from Reach, @reach/chrome offers the frame / scaffolding components to render your plugin components as a Reach page.

Let's look at an example.

import { FC } from 'react';
import { Page } from '@reach/chrome';
import {
  PluginProps,
  useCurrentUser,
  usePluginSettings,
  TextLink,
} from '@reach/core';

export const HelloWorld: FC<PluginProps> = () => {
  const { greetingLabel } = usePluginSettings<{ greetingLabel: string }>();
  const user = useCurrentUser();

  return (
    <Page title="Hello World">
      <div>
        <h3>
          {greetingLabel || 'Welcome,'} {user.displayName}!
        </h3>
        <TextLink url="https://google.ch">My Link</TextLink>
      </div>
    </Page>
  );
};

As you can see above we first import the Page from @reach/chrome. The Page component wraps our whole plugin code and ensures that the content is rendered within a Reach page; meaning it has a Title on top, the navigation on the left, the correct background color etc.

Next we use some hooks from @reach/core. One of these hooks allows us to access the currently logged-in user and the other provides some specific settings for the plugin.

Within the actual render we then also use the TextLink component to render a link. Of course, we could have also just used an a-tag however using this component ensures, that the link has the correct style, internal links are rendered as React router links and more.

Obviously there are many more functions and components available than used above. Just check the type definitions in @livetiles/reach-plugin-types.