Guides: Getting Started

A starter app is available on codesandbox and also can be cloned from this repo. This app gives you the basics of how to use Haunted and build components.

Use

npm install haunted

yarn add haunted

pnpm add haunted

For Internet Explorer 11, you'll need to use a proxy polyfill to use Haunted, in addition to the usual webcomponentsjs polyfills.

<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

Here is a full example of a web app that uses Haunted built for Internet Explorer 11. You can also use Custom Elements without the Shadow DOM if you need to:

component(MyComponent, { useShadowDOM: false }));

Importing

Haunted can be imported just like any other library when using a bundler of your choice:

import {
  html,
  component,
  useState,
  useMemo,
  useCallback,
  useEffect,
  useLayoutEffect,
  useReducer,
  useRef,
  useController,
  useContext
} from 'haunted';

The main entry point is intended for lit-html users.

Web modules

Haunted can work directly in the browser without using any build tools. Simply import the haunted.js bundle. You can use the unpkg or pika CDNs. This works great for demo pages and small apps. Here's an example with unpkg:

import { html } from 'https://unpkg.com/lit?module';
import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

If using pika then use the html export from Haunted, as pika bundles everything together:

import { html, component, useState } from 'https://cdn.pika.dev/haunted';

If you install Haunted locally this build is located at /node_modules/haunted/haunted.js. And if you're using PikaPkg (@pika/web) then you'll import it from /web_modules/haunted.js.