@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
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} />
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="..." />
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.
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"
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) { ... }
...
)
)
}
Licensed as MIT.