Tailored Components

Isomorphic utilities, components and hooks for Fresh and Preact.

Preact Hooks

A set of useful hooks for preact.

useContextFetch(ctx)

Retutns fetch function with set headers from context: {headers: {}}
useClickOutside(callback, refOrSelector, eventType=”click”)

Handle click outside of an element set by ref or selector.
useCssPlayEnd(onFinish, ref, inputs=[])

Handle the end of a CSS animation or/and transition. At the time doesn’t handle infinite animations.
useDebounceCallback(callback, delay, inputs=[])

Returns an object with a debounced version of the callback, immediate and cancel.
useEventListener(eventName, handler, elementRef, options)

Handles adding event listener to an element or a set of elements (elementRef).
usePosition(ref, options)

Calculate position of a floating element. Ported from @floating-ui/react-dom
useI18n(ctx)

Use translations set from context: {lc: {en: {}}, lang: "en"}

Components

The unstyled Preact components.

Completely unstyled popover for preact built with Floating UI

import { useRef } from "preact/hooks";
import Popover from "https://deno.land/x/tailored/components/Popover.tsx";

export default function App() {
  const ref = useRef(null);
  return (
    <div>
      <button ref={ref}>Open popover</button>
      <Popover
        target={ref}
        trigger="click"
        className="bg-white shadow-lg rounded-lg p-4"
        clickOutside
      >
        <div>Content</div>
      </Popover>
    </div>
  );
}

source / typedefs

ToggleClass

A component that toggles a class on a target element. The target element can be a ref or a selector.

import { tw } from "twind/core";
import ToggleClass from "https://deno.land/x/tailored/components/ToggleClass.tsx";

export default function MenuButton(props: MenuButtonProps) {
  return (
    <ToggleClass
      target="[mobile-menu]"
      toggleAddClass={tw("flex")}
      toggleRemoveClass={tw("visibility-hidden")}
    >
      <MenuIcon />
    </ToggleClass>
  );
}

source / typedefs

LazyHydrate

Hydrate components only when they are in the viewport or when an event is emitted. You can control hydration by emmiting a custom event on the document. By default, the component supports the visible event which is implemented with an intersection observer.

import { tw } from "twind/core";
import LazyHydrate from "https://deno.land/x/tailored/components/LazyHydrate.tsx";

export default function MenuButton(props: MenuButtonProps) {
  return (
    <LazyHydrate
      id="lazy123"
      event="visible"
      classNames={[
        "x-non-hydrated",
        "x-hydrated",
      ]}
    >
      <MyComplexComponent {...props} />
    </LazyHydrate>
  );
}

source / typedefs

Fresh plugins

Useful plugins for Fresh.

Context plugin

A plugin that enables the use of global Preact Context in islands. Current verion supports only one provider and only JSON-serializable values.

import Context from "./context.ts";
import contextPlugin from "tailored/plugins/context.ts";

await start(manifest, {
  plugins: [
    contextPlugin(
      Context,
      new URL("./context.ts", import.meta.url).href,
    ),
  ],
});

context.ts | source

Client plugin

Used for client-only code:

import clientPlugin from "tailored/plugins/client.ts";

await start(manifest, {
  plugins: [
    clientPlugin(
      new URL("./client.ts", import.meta.url).href,
    ),
  ],
});

client.ts | source

Preloader plugin

Show a progress indicator while the page is loading:

import preloaderPlugin from "tailored/plugins/preloader.ts";

await start(manifest, {
  plugins: [
    preloaderPlugin({
      color: "#48d1cc",
    }),
  ],
});

Twind v1 plugin

Twind v1 plugin for Fresh. Based on the official fresh plugin for twind v0.9

Plugin | Config | source

Development

Start the project:

deno task dev

This will watch the project directory and restart as necessary.

Testing

PUPPETEER_PRODUCT=chrome deno run -A --unstable https://deno.land/x/puppeteer@16.2.0/install.ts
deno task test

License

MIT