Getting Started

This project is deprecated and is not recommended for future development.

We recommend you check out Esri's Calcite Design System, which provides a react output target for the web component library!

Intro

Calcite React is a component library built in React and used by Esri. It is an implementation of Calcite, the geo-centric design language of Esri, aimed at helping React developers to quickly build components that adhere to the Calcite design language.

Installation

xxxxxxxxxx
 
npm i calcite-react

Usage

Theme Provider

Calcite React components rely on <CalciteThemeProvider /> to access our theme via React Context. All Calcite React components must be wrapped in this provider component in order to render properly. In most cases, it's recommended to wrap your entire app at the highest level.

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';
​
import CalciteThemeProvider from 'calcite-react/CalciteThemeProvider';
​
import App from 'path/to/App';
​
ReactDOM.render(
  <CalciteThemeProvider>
    <App />
  </CalciteThemeProvider>,
  document.getElementById('root')
);

Components

Below is a simple example of importing and using two Calcite React components.

xxxxxxxxxx
 
import React, { Component } from 'react';
​
import Button from 'calcite-react/Button';
import { CalciteH1 } from 'calcite-react/Elements';
​
class App extends Component {
  render() {
    return (
      <div>
        <CalciteH1>My App uses Calcite headers and buttons!</CalciteH1>
        <Button>A Calcite Button!</Button>
      </div>
    );
  }
}
​
export default App;

RTL

Right-to-left (RTL) is supported by Calcite React components with the dir="rtl" attribute. The attribute must be applied to the html element to be inherited properly by the library. This will mirror all components including changing the placement used by Tooltip, Popover, and Drawer.

xxxxxxxxxx
 
<html dir="rtl" ...>