Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@esri/hub-components

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@esri/hub-components

ArcGIS Hub web components

1.2.0-beta.7
Source
npm

Version published: 4 years ago

Weekly downloads: 21; increased by75%

Maintainers: 15

Weekly downloads

Created: 4 years ago

Source

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:

<head>
  <script src='https://unpkg.com/@esri/hub-components@0.1.0/dist/hub-components.js'></script>
  <link rel="stylesheet" href="https://unpkg.com/@esri/calcite-components@1.0.0-beta.24/dist/calcite/calcite.css">
</head>

<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

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.

FAQs

What is @esri/hub-components?

Is @esri/hub-components popular?

Is @esri/hub-components well maintained?

Package last updated on 20 Jan 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install