calcite-react
v0.62.1
Published
Calcite components for React
Downloads
484
Readme
This project is deprecated and is not recommended for future development.
We recommend you check out Esri's Calcite Design System!
Documentation
You can find the full docs for Calcite React here: https://calcite-react.netlify.com
Calcite React
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
npm i calcite-reactUsage
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.
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.
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.
<html dir="rtl" ...>References
Licensing
Copyright 2019 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's LICENSE file.