Browser Utilities

The Browser utilities provide functions for common tasks in browser environments, such as copying text, handling keyboard events, and fetching text content.

Functions

copyText

function copyText(text)

Copies the provided text to the clipboard.

Parameters

Name	Type	Description
text	string	The text to copy to the clipboard

Example

import { copyText } from '@semantic-ui/utils';

copyText('Hello, world!');
console.log('Text copied to clipboard');

Browser Support This function uses the modern navigator.clipboard.writeText API. Ensure compatibility with your target browsers or provide a fallback for older browsers.

getKeyFromEvent

function getKeyFromEvent(event)

Extracts a standardized key representation from a keyboard event.

Parameters

Name	Type	Description
event	KeyboardEvent	The keyboard event object

Returns

A string representing the key pressed, including any modifier keys (e.g., “ctrl+a”).

Example

import { getKeyFromEvent } from '@semantic-ui/utils';

document.addEventListener('keydown', (event) => {
  const key = getKeyFromEvent(event);
  console.log(`Key pressed: ${key}`);
});

Modifier Keys This function handles modifier keys (Ctrl, Alt, Shift, Meta) and combines them with the pressed key. It also normalizes some key names for consistency.

getText

async function getText(src)

Fetches text content from a given URL.

Parameters

Name	Type	Description
src	string	The URL to fetch the text from

Returns

A Promise that resolves with the fetched text content.

Example

import { defineComponent } from '@semantic-ui/core';
import { getText } from '@semantic-ui/utils';

const template = await getText('/templates/component.html');
const css = await getText('/templates/component.css');

defineComponent({
  template,
  css
});

Usage Note This can be used on the server to load static assets like templates or css

openLink

function openLink(url, { newWindow = false, target, event } = {})

Opens a URL, optionally in a new window.

Parameters

Name	Type	Description
url	string	The URL to open
options	object	Optional configuration

Options

Name	Type	Default	Description
newWindow	boolean	false	Whether to open in a new window
target	string	null	Target attribute for the link
event	Event	null	Event object to prevent default behavior

Example

import { openLink } from '@semantic-ui/utils';

// Open in current window
openLink('https://example.com');

// Open in new window
openLink('https://example.com', { newWindow: true });

// Prevent default event behavior
openLink('https://example.com', { event: clickEvent });

getText

async function getText(src)

Fetches text content from a URL.

Component Usage getText can be used to retrieve html and css for use in a web component on the client from a separate file without a compilation step.

Parameters

Name	Type	Description
src	string	The URL to fetch from

Returns

A Promise that resolves with the text content.

Example

import { getText } from '@semantic-ui/utils';

const content = await getText('https://example.com/content.txt');
console.log(content);

getJSON

async function getJSON(src)

Fetches and parses JSON content from a URL.

Parameters

Name	Type	Description
src	string	The URL to fetch from

Returns

A Promise that resolves with the parsed JSON content.

Example

import { getJSON } from '@semantic-ui/utils';

const data = await getJSON('https://example.com/data.json');
console.log(data);