Getting Started

In this section, you’ll learn how to install Katon SolidJS and begin using its hooks and components in your SolidJS application.

Adding Katon to Your Project

npm

npm install katon-solid-js

yarn

yarn add katon-solid-js

pnpm

pnpm add katon-solid-js

It is recommended to install a copy of katon-solid-js in your package.json, using one of the methods mentioned above.

Hook Usage Example

As an example, we will write one of the hooks: createBreakpoint, which returns the currently active breakpoint.

default.tsx

import { createBreakpoint } from "katon-solid-js/hooks"
import { Show } from "solid-js/web"

export default function Component() {
    // use tailwind as default breakpoint
    const breakpoint = createBreakpoint()
    return (
        <div>
            <Show when={breakpoint.smaller("sm")}>
                {/* the component will be displayed when the screen size 
                is smaller than `sm` */}
            </Show>
            {/* .... */}
        </div>
    )
}

with-specific.tsx

import { createBreakpoint, bulmaBreakpoint } from "katon-solid-js/hooks"
import { Show } from "solid-js/web"

export default function Component() {
    const breakpoint = createBreakpoint(bulmaBreakpoint)
    return (
        <div>
            <Show when={breakpoint.smaller("sm")}>
                {/* the component will be displayed when the screen size 
                is smaller than `sm` */}
            </Show>
            {/* .... */}
        </div>
    )
}

custom.tsx

import { createBreakpoint, bulmaBreakpoint } from "katon-solid-js/hooks"
import { Show } from "solid-js/web"

const customBreakpoint = {
    mobile: 0,
    tablet: 768,
    desktop: 1024,
}

const createCustomBreakpoint = () => createBreakpoint(customBreakpoint)

export default function Component() {
    const breakpoint = createCustomBreakpoint()
    return (
        <div>
            <Show when={breakpoint.smaller("desktop")}>
                {/* the component will be displayed when the screen size 
                is smaller than `desktop` */}
            </Show>
            {/* .... */}
        </div>
    )
}

Component Usage Example

As an example, we will write one of the components: AnimatePresence, which runs transitions or animations when the show prop changes.

string-class.tsx

import { AnimatePresence } from "katon-solid-js/components"

export type ComponentProps = {
    show?: boolean
}

export default function Component(props: ComponentProps) {
    return (
        <AnimatePresence
            as="p" // default is `div`
            show={props.show}
            class="p-2 data-[show]:animate-something-in data-[closed]:animate-something-out"
        >
            {/* content here */}
        </AnimatePresence>
    )
}

object-class.tsx

import { AnimatePresence } from "katon-solid-js/components"

export type ComponentProps = {
    show?: boolean
}

export default function Component(props: ComponentProps) {
    return (
        <AnimatePresence
            as="p" // default is `div`
            show={props.show}
            class={{
                default: "p-2",
                // animation will run when props.show is `true`
                show: "animate-something-in",
                // animation will run when props.show is `false`,
                // then the component will unmount
                closed: "animate-something-out",
            }}
        >
            {/* content here */}
        </AnimatePresence>
    )
}

INFO

When the component is rendered, a data-show attribute will automatically be added to the HTML element, and data-closed will be applied when it begins to unmount.

INFO

The unmounting process will wait for any transition or animation to finish if present.