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

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"
  ]
]} />