@zaydek/lib NPM

@zaydek/lib

@zaydek/lib is a typed standard library for personal use. Contributions and improvements are welcome as issues and or pull requests.

To get started, simply run this command:

yarn add @zaydek/lib
# or npm i @zaydek/lib

attrs/disableAutoCorrect
attrs/target_blank
components/DocumentTitle
components/LayoutDocumentTitle
components/ExtAnchor
components/Switch
components/SVG
components/Case
helpers/range
helpers/toKebabCase
helpers/toTitleCase
hooks/useBreakpoints

attrs/disableAutoCorrect

Attributes for disabling autocorrect.

Read https://davidwalsh.name/disable-autocorrect for more information.

Usage:

import { disableAutoCorrect } from "@zaydek/lib/dist/attrs"

<input type="text" {...disableAutoCorrect} />

attrs/target_blank

Attributes for safely opening an anchor in a separate page.

Read https://mathiasbynens.github.io/rel-noopener for more information.

Usage:

import { target_blank } from "@zaydek/lib/dist/attrs"

<a href="..." {...target_blank} />

components/DocumentTitle components/LayoutDocumentTitle

interface Props {
	title: string
	children?: React.ReactNode
}

The DocumentTitle components declaratively render document.title. They can be used as wrapper components or as side-effects.

The difference between DocumentTitle and LayoutDocumentTitle is simply whether useEffect or useLayoutEffect is used. useLayoutEffect renders eagerly whereas useEffect renders lazily. If you don’t know what that means, use DocumentTitle.

Usage:

import { DocumentTitle } from "@zaydek/lib/dist/components"

<DocumentTitle title="...">
	{children}
</DocumentTitle>

import { DocumentTitle } from "@zaydek/lib/dist/components"

<DocumentTitle title="..." />

components/ExtAnchor

An <ExtAnchor> is simply an <a> with target_blank destructured.

import { ExtAnchor } from "@zaydek/lib/dist/components"

<ExtAnchor href="TODO">Hello, world!</ExtAnchor>
// -> <a href="TODO" target="_blank" rel="noopener noreferrer">Hello, world!</a>

components/Switch components/Case

Renders a switch-case expression using JSX. <Default> is not currently supported.

Usage:

import { Switch, Case } from "@zaydek/lib/dist/components"

<Switch on={...}>
  <Case case={...}>
    ...
  <Case>
  <Case case={...}>
    ...
  <Case>
  <Case case={...}>
    ...
  <Case>
</Switch>

Note: <Switch> and <Case> are implemented using generics. This means you can use <Switch<string>> to enforce type-correctness for on={...} or <Case<string>> for case={...}. Note that <Switch<string>> does not enforce type-correctness for children <Case> elements.

helpers/range

Helper to declaratively generate a range. A range is simply an array of numbers, generally integers.

import { range } from "@zaydek/lib/dist/helpers"

// function range(to: number): number[]
range(1) // -> [0]
range(2) // -> [0, 1]
range(4) // -> [0, 1, 2, 3]
range(8) // -> [0, 1, 2, 3, 4, 5, 6, 7]

import { range } from "@zaydek/lib/dist/helpers"

// function range(from: number, to: number): number[]
range(4, 8) // -> [4, 5, 6, 7]

import { range } from "@zaydek/lib/dist/helpers"

// function range(from: number, to: number, step: number): number[]
range(4, 8, 2) // -> [4, 6]

helpers/toKebabCase helpers/toTitleCase

Helpers for converting between kebab-case and TitleCase.

import { toKebabCase, toTitleCase } from "@zaydek/lib/dist/helpers"

toKebabCase("HelloWorld")  // "hello-world"
toTitleCase("hello-world") // "HelloWorld"

hooks/useBreakpoints

Hook for conditionally rendering. The following breakpoints are used by default:

const defaultBreakpoints = {
	xs: 40 * 16, // ->  512
	sm: 48 * 16, // ->  640
	md: 56 * 16, // ->  768
	lg: 64 * 16, // -> 1024
	xl: 80 * 16, // -> 1280
}

useBreakpoints simulates @media (min-width: ...). This API is preferred over className="hidden sm:block".

You can parameterize breakpoints by passing a Breakpoints object. Note that only xs-xl breakpoints are supported.

Usage:

import { useBreakpoints } from "@zaydek/lib/dist/hooks"

function Component() {
	const screen = useBreakpoints()
	return (
		screen.sm && ( // @media (min-width: 768px) { ... }
			...
		)
	)
}