calcite components react

---

tags: [react]

Calcite Components React

These are notes from a Dev Office Hours lightning talk.

A set of React components that wrap Calcite Components.

Resources

• Calcite Components React (CCR) is available on NPM as @esri/calcite-components-react

• There is CCR section on the Framework integration documentation page

• Stencil has documentation about the react output target

• To avoid confusion - calcite-react is a separate, deprecated project

• Log CCR issues in the calcite-design-system repo

• There is a codesandbox template for bug reports

Why not use the web components directly?

The custom events emitted by Calcite Components won't work properly due to React's synthetic event system.

When using the standard web components in React, you need to save a ref to the element and add a listener:

const sliderEl = useRef(null);
const [sliderValue, setSliderValue] = useState(50);
function onUpdate(event) {
  setSliderValue(event.target.value);
}
useEffect(
  (_) => {
    sliderEl.current.addEventListener("calciteSliderUpdate", onUpdate);
  },
  [sliderEl],
);

Using Calcite Components React, these events are connected for you:

const [sliderValue, setSliderValue] = useState(50);
<CalciteSlider onCalciteSliderUpdate={​(e) => setSliderValue(e.target.value)}​ />;

If you're using TypeScript, you'll also get increased type safety for your event listeners, props, etc.

Migrating

From Calcite Components

The compatible version of Calcite Components is included in the React wrapper

npm install @esri/calcite-components-react
npm uninstall @esri/calcite-components

Sam Matenaer created a helpful component syntax migration tool

<!-- calcite-components -->
<calcite-input-date-picker numbering-system="ar"></calcite-input-date-picker>

// calcite-components-react
import {​ CalciteInputDatPicker }​ from "@esri/calcite-components-react";
 
<CalciteInputDatPicker numberingSystem="ar" />;

From Calcite React

• Calcite Components React uses custom elements under the hood

• Use properties and CSS variables to customize Calcite Components React styles

• Subscribe to existing issues or log new ones for Calcite React components that aren't available yet in Calcite Design System

  • Data Grid #1574
  • Navigation #6531
  • Layout #6743