@esri/hub-components

Hub Components

NOTE: This library is under active development. We strive to maintain a stable API, but may introduce breaking changes.

Web components for embedding ArcGIS Hub capabilities into websites and custom applications.

These components can added to any website or application regardless of framework. There are currently a few components with more being added over time to allow people to easily embed most parts of ArcGIS Hub into their sites.

Example

You will be able to add Hub components to your website:

<arcgis-hub-content-gallery query="water" layout="grid" sortOrder="desc" limit="4"> </arcgis-hub-content-gallery>

Prerequisites

Node and Npm versions in this package are managed via package.json using Volta. Please ensure you have this installed

• volta:
  • OSX: curl https://get.volta.sh | bash
  • Windows: link

Explore the components

To quickly get started exploring the components you can clone this repository:

git clone https://github.com/Esri/hub-components.git

Then change directory and install dependencies:

> cd hub-components
> npm install --legacy-peer-deps

Note: We currently have an issue with peer dependencies and semantic release. The short term solution is to just pass the --legacy-peer-deps as above when running npm i.

Then build the components:

npm run build

And finally run storybook:

npm run storybook

This will give you live-reload of both the stories and the components. To start storybook with live-reload of the stories but not the components:

npm run storybook.run

Using these components

You can use these components similar to other embeds like YouTube using a script tag, or you can integrate within your web application.

Translations

These components use i18next to manage translations for localization. The translations are lazyloaded when the component loads, specifically with requests to https://<application-root-url>/assets/i18n/<component-name>.i18n.<language>.json. Therefore, to use these components in your application, you will need to copy the translation files found in /dist/hub-components/assets/i18n of this module to a publicly accessible application path. The components will look for translations on the default path named /assets/hub-components/i18n/. Alternatively, you can set your own path to the translations with a <meta> element:

  <meta name="hub-components-assets-url" content="/path/to/i18n" >

Script Tag

Add this code in the head of your index.html. Then you can use the element anywhere in your template, JSX, HTML, etc.

<link rel='stylesheet' type='text/css' href='https://unpkg.com/@esri/calcite-components@1.0.0-next.292/dist/calcite/calcite.css' />
<script type='module' src='https://unpkg.com/@esri/hub-components@2.4.0/dist/hub-components/hub-components.esm.js'></script>

In a custom application

• Run npm install hub-components --save
• Add an import to the npm packages import hub-components;
• Then you can use the element anywhere in your template, JSX, html etc

React App

To use Hub components in a React application, see Stencil.js docs on React

Ember App

To use Hub components in an Ember application, use ember-cli-stencil

• Run ember install ember-cli-stencil ember-auto-import
• Run npm install @esri/hub-components --save

Read Development Notes for more information.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

License

Copyright © 2022 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.