https://github.com/zaydek/lib
Typed personal standard library
https://github.com/zaydek/lib
Last synced: over 1 year ago
JSON representation
Typed personal standard library
- Host: GitHub
- URL: https://github.com/zaydek/lib
- Owner: zaydek
- Created: 2020-10-30T05:09:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-20T02:53:00.000Z (over 5 years ago)
- Last Synced: 2025-01-24T19:17:25.917Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 126 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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:
```bash
yarn add @zaydek/lib
# or npm i @zaydek/lib
```
## Table of Contents
- [`attrs/disableAutoCorrect`](#disableAutoCorrect)
- [`attrs/target_blank`](#target_blank)
- [`components/DocumentTitle`](#DocumentTitle)
- [`components/LayoutDocumentTitle`](#LayoutDocumentTitle)
- [`components/ExtAnchor`](#ExtAnchor)
- [`components/Switch`](#Switch)
- [`components/SVG`](#SVG)
- [`components/Case`](#Case)
- [`helpers/range`](#range)
- [`helpers/toKebabCase`](#toKebabCase)
- [`helpers/toTitleCase`](#toTitleCase)
- [`hooks/useBreakpoints`](#useBreakpoints)
---
Attributes for disabling autocorrect.
Read https://davidwalsh.name/disable-autocorrect for more information.
**Usage:**
```tsx
import { disableAutoCorrect } from "@zaydek/lib/dist/attrs"
```
---
Attributes for safely opening an anchor in a separate page.
Read https://mathiasbynens.github.io/rel-noopener for more information.
**Usage:**
```tsx
import { target_blank } from "@zaydek/lib/dist/attrs"
---
`components/DocumentTitle`
`components/LayoutDocumentTitle`
```ts
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:**
```tsx
import { DocumentTitle } from "@zaydek/lib/dist/components"
{children}
```
```tsx
import { DocumentTitle } from "@zaydek/lib/dist/components"
```
---
An `` is simply an `` with `target_blank` destructured.
```tsx
import { ExtAnchor } from "@zaydek/lib/dist/components"
Hello, world!
// -> Hello, world!
```
---
`components/Switch`
`components/Case`
Renders a switch-case expression using JSX. `` is not currently supported.
**Usage:**
```tsx
import { Switch, Case } from "@zaydek/lib/dist/components"
...
...
...
```
**Note:** `` and `` are implemented using generics. This means you can use `>` to enforce
type-correctness for `on={...}` or `>` for `case={...}`. Note that `>` **does not** enforce
type-correctness for children `` elements.
---
Helper to declaratively generate a range. A range is simply an array of numbers, generally integers.
```ts
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]
```
```ts
import { range } from "@zaydek/lib/dist/helpers"
// function range(from: number, to: number): number[]
range(4, 8) // -> [4, 5, 6, 7]
```
```ts
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`.
```ts
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:
```ts
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:**
```tsx
import { useBreakpoints } from "@zaydek/lib/dist/hooks"
function Component() {
const screen = useBreakpoints()
return (
screen.sm && ( // @media (min-width: 768px) { ... }
...
)
)
}
```
## License
Licensed as [MIT](./LICENSE).