Netzo Logo

Overview

Customizable UI components, blocks and layouts to import/copy-paste into apps.

The netzo/components module is a collection of UI components written in Preact (TSX), based on shadcn/ui and styled with unocss via pre-defined themes using the presetNetzo preset.

Import or copy-paste components to customize to your needs You can start by importing and using components directly. When you need more customization options, simply copy-and-paste the source code of selected components into your project and customize to your needs, the code is yours. For the original documentation you can always refer to shadcn/ui.

Usage

To make use of the UI components, blocks and layout you must

  1. register the unocss Fresh plugin in the netzo.config.ts configuration file and pass it the unocssConfig from step 2.
  2. add a plugins/unocss.config.ts file (url: import.meta.url required) and register the presetNetzo UnoCSS preset.
  3. add the required imports to the deno.json(c) file of the project.
import { defineConfig } from "netzo/mod.ts";
import * as netzo from "netzo/plugins/mod.ts";
import { unocss } from "netzo/plugins/unocss/plugin.ts";
import unocssConfig from "./unocss.config.ts";

export default defineConfig({
  plugins: [
    unocss(unocssConfig),
  ],
});

Theming

The presetNetzo UnoCSS preset allows configuring pre-defined themes by specyfing a primary color and radius to be applied to all components.

plugins/unocss.config.ts
import { defineUnocssConfig } from "netzo/plugins/unocss/plugin.ts";
import { presetNetzo } from "netzo/plugins/unocss/preset-netzo.ts";

export default defineUnocssConfig({
  url: import.meta.url,
  presets: [
    presetNetzo({ color: "blue", radius: 1.0 }),
  ],
});

Icons

Icons are powered by the Unocss Icons preset and rendered using only CSS. You can use any icon in the mdi, logos or simple-icons collections by adding the prefix i-<collection>- or <collection>- to the icon name. If you need another icon collection, you can add it to the unocss.config.ts configuration using the presetIcons preset.

<!-- Anchor icon -->
<div class="i-mdi-anchor" />
<!-- Alarm icon in blue -->
<div class="i-mdi-alarm text-blue-400" />
<!-- Deno icon made larger -->
<div class="i-logos-deno text-3xl" />
<!-- Sun in light mode, Moon in dark mode -->
<button class="i-mdi-weather-sunny dark:i-mdi-weather-night" />
<!-- Happy face emoticon, turns to sad on hovering -->
<div class="i-mdi-emoticon-happy hover:i-mdi-emoticon-sad" />

Hooks

The Hooks API allows composing state and side effects to reuse stateful logic between components. They make it possible to neatly extract the logic for state and side effects.

If you've used Preact before, Hooks provide a simpler alternative to patterns like "render props" and "higher order components." They facilitate clean extraction of logic for state and side effects, enhancing unit testing capabilities.

Stateful Hooks

There are two ways to import hooks: from preact/hooks or preact/compat.

useState

Replace class-based state management with useState, offering a straightforward way to handle component state.

  const [state, setState] = useState(initialState);

useReducer

Similar to Redux, useReducer simplifies complex state logic by allowing dependencies on previous states.

const [state, dispatch] = useReducer(reducer, initialState);

Memoization

useMemo

Optimize performance by memoizing expensive computations and recalculating only when necessary.

const memoizedState = useMemo(() => computeExpensiveState(a, b), [a, b]);

useCallback

Ensure stable functions by maintaining referential equality, useful for child component optimizations.

const onClick = useCallback(() => console.log(a, b), [a, b]);

useRef

Access DOM elements within functional components, akin to createRef.

const inputRef = useRef<HTMLInputElement>(null);

useContext

Access context within functional components without additional wrappers.

const Theme = createContext('light');
const theme = useContext(Theme);

Side-Effects

useEffect

Trigger side effects and cleanup tasks efficiently, promoting a shift towards effect-centric thinking.

useEffect(() => document.title = `You clicked ${count} times`, [count]);

useLayoutEffect

Similar to useEffect, but fires synchronously after DOM updates.

useLayoutEffect(() => document.title = `You clicked ${count} times`, [count]);

useErrorBoundary

Catch errors within child components and customize error handling UI.

const [error, resetError] = useErrorBoundary();

Utility Hooks

useId

Generate consistent unique identifiers for elements, useful for various UI scenarios.

By embracing Hooks, your framework simplifies component logic, enhances reusability, and promotes a more efficient approach to handling state and side effects.

Hooks Libraries

Any external Hook library that supports Preact, can be used with Netzo. React hook libraries can be used by importing them via esm.sh using ?external=react,react-dom&target=es2022 in the query parameter to fix possible compatibility issues. Some examples include:

usehooks-ts

A collection of reusable React hooks written in TypeScript and with no dependencies.

import {...} from "https://esm.sh/usehooks-ts?external=react,react-dom&target=es2022";

@uidotdev/usehooks

A collection of modern, server-safe React hooks – from the ui.dev team.

import {...} from "https://esm.sh/@uidotdev/usehook?external=react,react-dom&target=es2022";

@react-hooks-library/core

A collection of React hooks for common use cases.

import {...} from "https://esm.sh/@react-hooks-library/core?external=react,react-dom&target=es2022";

ahooks

A high-quality & reliable React Hooks library

import {...} from "https://esm.sh/ahooks?external=react,react-dom&target=es2022";