Skip to main content

useAssets

This hook returns the widget's uploaded assets as a read-only record. It provides access to asset URLs that have been uploaded through the widget configuration.

Import​

import { useAssets } from "~lib/use-assets";

API​

const assets = useAssets();

Parameters​

This hook takes no parameters.

Return Value​

NameTypeDescription
assetsReadonly<Record<string, string>>A read-only object mapping asset names to their URLs

Example​

import { useAssets } from "~lib/use-assets";

const Widget = () => {
  const assets = useAssets();

  return (
    <div>
      {assets.logo && (
        <img src={assets.logo} alt="Logo" style={{ maxWidth: "200px" }} />
      )}
      {assets.background && (
        <div
          style={{
            backgroundImage: `url(${assets.background})`,
            backgroundSize: "cover",
            width: "100%",
            height: "300px",
          }}
        />
      )}
      <h2>Available Assets:</h2>
      <ul>
        {Object.keys(assets).map((key) => (
          <li key={key}>{key}</li>
        ))}
      </ul>
    </div>
  );
};

See Also​