To start storybook, run `npm run storybook`. To build the library you can run `npm run build` or `npm run start`, the difference is that `npm run start` will build on file changes.

Usage no npm install needed!

<script type="module">
  import sentinelHubEoComponents from 'https://cdn.skypack.dev/@sentinel-hub/eo-components';



To start storybook, run npm run storybook. To build the library you can run npm run build or npm run start, the difference is that npm run start will build on file changes.

Adding packages

As little external packages as possible should be used, but if needed, add a package to dependencies. Packages like prettier, eslint and typescript should be added to devDependecies.

If adding a package to peerDependecies please make sure it deserves to be there. One can read more at the following link Understanding the npm dependency model. In short, if react and react-dom are peerDependecies, then the consuming project/application must have react and react-dom in its package.json. Packages in peerDependecies will not be installed by the library, but should be installed by the application/project that consumes this library.


This project uses rollup for bundling. Rollup should treat external packages as external, and not bundle them with our library. This is achieved by the following in rollup.config.js

  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],


To use eo-components in your app,run:

$ npm install @sentinel-hub/eo-components

or if you prefer yarn:

$ yarn add @sentinel-hub/eo-components

Current usage across apps:


  • LocationSearchBox
  • LegendFromSpec
  • LegendFromDefinitionJson
  • LegendFromGraphicsUrl


  • LocationSearchBoxControlled


  • LocationSearchBox

Not used:

  • SocialShare
  • EOBHeader (EOB2)
  • EOBTimelapsePanel (EOB2)
  • EOBImageDownloadPanel (EOB2)