# 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:

```bash
npm install @xplortech/apollo-react@latest
```

## Styles

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

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

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

```ts
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`).

## Getting Started

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

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

```jsx
<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:

```html
<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:

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