@esri/hub-components

Hub Components

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 can easily add Hub components to your website:

<script nomodule src="build/hub-components.js"></script>

<hub-event clientid="WXC842NRBVB6NZ2r" slug="community-garden-management-workshop" orgurl="https://cityx.maps.arcgis.com"></hub-event>

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

And finally run storybook

npm run storybook

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 <script src='https://unpkg.com/@esri/hub-components@0.1.0/dist/hub-components.js'></script> in the head of your index.html

• Then you can use the element anywhere in your template, JSX, html etc

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 © 2020 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.