# @dataforsyningen/gsearch-ui

> UI component for GSearch.

Latest version **2.2.0** (published 2025-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dataforsyningen/gsearch-ui
pnpm add @dataforsyningen/gsearch-ui
yarn add @dataforsyningen/gsearch-ui
bun add @dataforsyningen/gsearch-ui
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2025-05-09 |
| First published | 2022-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Styrelsen for Dataforsyning og Infrastruktur |
| Maintainers | dataforsyningen-user, iamfrank |
| Keywords | Dataforsyningen, SDFI, gsearch |

## Links

- npm: https://www.npmjs.com/package/@dataforsyningen/gsearch-ui
- Repository: https://github.com/SDFIdk/gsearch-ui
- Homepage: https://github.com/SDFIdk/gsearch-ui#readme
- Issues: https://github.com/SDFIdk/gsearch-ui/issues
- npm.io page: https://npm.io/package/@dataforsyningen/gsearch-ui

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2025-05-09
- 2.1.3 — 2024-08-19
- 2.1.2 — 2024-06-06
- 2.1.0 — 2024-05-01
- 2.0.1 — 2024-01-23
- 2.0.0 — 2024-01-17
- 1.5.1 — 2023-12-08
- 1.5.0 — 2023-12-06
- 1.4.0 — 2023-12-06
- 1.3.0 — 2023-12-06
- 1.2.0 — 2023-09-13
- 1.1.0 — 2023-05-23
- 1.0.0 — 2023-04-04
- 0.9.2 — 2023-01-16
- 0.9.1 — 2023-01-16
- … 17 more at https://npm.io/package/@dataforsyningen/gsearch-ui/versions

## README

# GSearch-UI

A web component that implements a simple UI for [GSearch](https://github.com/SDFIdk/gsearch).

## Demo

Demo page at https://sdfidk.github.io/gsearch-ui/

## Installation

### npm

```bash

$ npm i @dataforsyningen/gsearch-ui -S

```

## Usage

To use GSearch-UI you must first create a user at https://dataforsyningen.dk/ and create a token.

You can then use GSearch-UI like in the example below.

```html
<main>
  <g-search data-token="INSERTYOURTOKENHERE"></g-search>
</main>
<script type="module">
  import { GSearchUI } from '@dataforsyningen/gsearch-ui'
  customElements.define('g-search', GSearchUI)
  document.querySelector("g-search").addEventListener('gsearch:select', (event) => {
    // handle the click here
    // event.detail contains the result object
  })
</script>
```

### Data attributes

GSearch-UI is configured using html data attributes.

|attribute name|description|required|updates dynamically|default|
|:---|---|---|---|---|
|`data-token`|A valid token from https://dataforsyningen.dk/|yes|yes|`NaN`|
|`data-resources`|The resources that should be searched in. See more information in the [GSearch documentation](https://github.com/SDFIdk/gsearch/tree/main/doc)|no|yes|`navngivenvej,husnummer,adresse,stednavn,kommune,region,retskreds,postnummer,opstillingskreds,sogn,politikreds,matrikel,matrikel_udgaaet`|
|`resource-filter-enabled`|Show filter buttons for the selected resources to allow the user to toggle resources.|no|yes|`false`|
|`data-limit`|The number of matches for each resource to be shown. The maximum value is 100.|no|yes|`10`|
|`data-placeholder`|The placeholder text to show in the input field.|no|yes|`søg...`|
|`data-api`|Use a custom URL for GSearch API (ie. if you want to use a test API)|no|yes|`https://api.dataforsyningen.dk/rest/gsearch/v2.0/`|
|`data-filter`|Use a custom filter in the search query. [Learn about filters in the GSearch docs.](https://github.com/SDFIdk/gsearch/tree/main/doc#filter)|no|no|`none`|
|`data-srid`|The coordinate system of the returned geometries. The following values are allowed: 2196, 2197, 2198, 3857, 4093, 4094, 4095, 4096, 4326, 25832, 25833. |no|yes|`25832`|

### On click event

When clicking on a result displayed in the GSearch-UI it will dispatch a custom event, `gsearch:select`, that contains the result object in event.detail. The structure of the object depends on the resource. See more information about the different resouces here: https://github.com/SDFIdk/gsearch/tree/v2.0/doc.

Clicking the cross to clear the input field fires a custom event, `gsearch:clear`.

## Publish NPM

Create a new release in Github to publish an updated NPM package.
Details are available in the "Npm" section of SDFI ITU's wiki.

## Acknowledgements

GSearch-UI is made available under the MIT license by
Styrelsen for Dataforsyning og Infrastruktur @ [SDFI](https://sdfi.dk/)

---
_Source: https://npm.io/package/@dataforsyningen/gsearch-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._