Awesome
Tailored Components
Isomorphic utilities, components and hooks for Fresh and Preact.
Components
The unstyled Preact components.
Popover
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>
);
}
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>
);
}
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>
);
}
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,
),
],
});
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,
),
],
});
Preloader plugin
Show a progress indicator while the page is loading:
import preloaderPlugin from "tailored/plugins/preloader.ts";
await start(manifest, {
plugins: [
preloaderPlugin("#48d1cc", "4px"),
],
});
Twind v1 plugin
Twind v1 plugin for Fresh. Based on the official fresh plugin for twind v0.x
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
andcancel
. - 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"}
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