React Integration

This package generates a set of react wrapper elements which are published in genesys-spark-chart-components-react and should be used in favor of directly using the custom elements in a React app.

Installation

Install genesys-spark-chart-components-react with same version as the desired genesys-spark-chart-components version. (e.g. [email protected] will install [email protected]). To avoid version conflicts, remove the direct dependency on genesys-spark-chart-components if adding to an existing consumer of the spark components.

Usage

Native React elements are imported from genesys-spark-chart-components-react, the custom elements still need to be registered as before, (e.g. with registerElements imported from genesys-spark-chart-components).

Example

import { registerElements } from 'genesys-spark-chart-components';
import { GuxTODO } from 'genesys-spark-chart-components-react';
registerElements(); // Realistically this would probably be in something like index.tsx

const MyReactComponent = () => {
  const [counter, setCounter] = useState(0);

  return (
    <GuxButton onClick={() => setCounter(x => x + 1)}>
      You have clicked {counter} times
    </GuxButton>
  );
};

Events

If a stencil component defines an event called eventname, then the React wrapper element will have a corresponding onEventname prop. For example, <GuxModal> has onGuxdismiss corresponding to the guxdismiss event from <gux-modal>.