Apollo React - React Components for Xplor Apollo

This package contains React bindings for Apollo components. Apollo Core uses web components, but this package wraps those components in a React-friendly JSX syntax.

If your app uses React and you want to use Apollo components, you should use this package!

Installation

Apollo React is published as a public package on NPM.

Install:

npm install @xplortech/apollo-react@latest

Styles

Import the full stylesheet once in your app (backwards-compatible bundle):

import '@xplortech/apollo-react/css/apollo.css';

For modular CSS (brand theming and treeshaking), import from the proxy paths exposed by this package:

import '@xplortech/apollo-react/css/variables/apollo.css';
import '@xplortech/apollo-react/css/core.css';
import '@xplortech/apollo-react/css/tailwind-theme.css'; // when using Tailwind v4 with Apollo theme tokens

Other modular entry points: reset.css, typography.css, variables/field-edge.css, and vendor/flatpickr.css.

Per-component CSS for treeshaking is not proxied here — import directly from @xplortech/apollo-core/css/components/* (for example @xplortech/apollo-core/css/components/button.css). When using these per-component paths, declare @xplortech/apollo-core in your own package.json: it otherwise resolves as a pinned transitive dependency of this package via npm hoisting, which is fragile and prevents bumping core independently.

Server-side rendering

Import server bindings from the dedicated ./server subpath export when rendering on Node (e.g. renderToReadableStream, Next.js App Router server components):

import { XplButton } from '@xplortech/apollo-react/server';

Server bindings call Stencil hydrateModule during SSR so server HTML matches what the client hydrates. Client bundles should keep using the default @xplortech/apollo-react import. See the SSR guide for full setup.

Getting Started

Most changes rely on changing dash-separated tag names (i.e. xpl-component) to camel-case (i.e. XplComponent). For example:

<xpl-button variant="secondary" size="sm" icon="heart">Click me</button>

<XplButton variant="secondary" size="sm" icon="heart">Click me</XplButton>

But one thing that is much easier is passing complex data to components in a declarative, rather than imperative way. For example, if you are rendering a table with web components, you would have to add data separate from the component markup:

<xpl-table id="table"></xpl-table>
<script>
  document.getElementById('table').data = [
    [
      "Row 1 Item 1",
      "Row 1 Item 2"
    ],
    [
      "Row 2 Item 1",
      "Row 2 Item 2"
    ]
  ];
</script>

Whereas with React components you can pass it directly through props:

/**
 * Notice that we don't need to include an `id` to
 * reference it later in the markup
 */
<XplTable data={[
  [
    "Row 1 Item 1",
    "Row 1 Item 2"
  ],
  [
    "Row 2 Item 1",
    "Row 2 Item 2"
  ]
]} />