Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theninthsky/frontend-essentials
A set of useful functions, components and hooks.
https://github.com/theninthsky/frontend-essentials
javascipt npm-package react-hooks reactjs
Last synced: 3 months ago
JSON representation
A set of useful functions, components and hooks.
- Host: GitHub
- URL: https://github.com/theninthsky/frontend-essentials
- Owner: theninthsky
- License: mit
- Created: 2021-09-26T05:38:12.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-23T10:09:53.000Z (about 1 year ago)
- Last Synced: 2024-07-11T16:34:05.605Z (4 months ago)
- Topics: javascipt, npm-package, react-hooks, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/frontend-essentials
- Size: 1.26 MB
- Stars: 22
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Frontend Essentials
npm i frontend-essentials
- [React Components](#react-components)
- [LazyRender](#lazyrender)
- [Media](#media)
- [Meta](#meta)
- [React Hooks](#react-hooks)
- [useAxios](#useaxios)
- [useFetch](#usefetch)
- [useMedia](#usemedia)
- [useObjectState](#useobjectstate)
- [usePersistState](#usepersiststate)
- [usePersistObjectState](#usepersistobjectstate)
- [useProgressiveImage](#useprogressiveimage)
- [useTransitionNavigate](#usetransitionnavigate)
- [Utility Functions](#utility-functions)
- [lazyPrefetch](#lazyprefetch)
# React Components
## LazyRender
Lazily renders a large list of items:
```js
{({ _id, title, content, date }) => }
```
## Media
Conditionally renders a component when certain media queries are matched:
```js
```
When an array is passed as `query`, queries will have an `OR` relationship when matching:
```js
// matches when width is at most 480px or at least 1200px
```
## Meta
Sets meta properties for `title`, `description` and _[Open Graph](https://ogp.me/)_:
```js
```
Results in:
```html
Frontend Essentials
```
# React Hooks
## useAxios
Handles http requests easily:
```js
const { loading, status, error, data, activate } = useAxios({
method: 'get',
url: 'https://example.com/v1/items',
onSuccess: ({ data }) => console.log(data),
onError: ({ error }) => console.error(error)
})
```
Initial request can be skipped and triggered manually:
```js
const { loading, status, error, data, activate } = useAxios({
method: 'get',
url: 'https://example.com/v1/items',
manual: true,
onSuccess: ({ data }) => console.log(data)
})
setTimeout(activate, 3000)
```
When specifying a UUID, response data will be persisted between rerenders:
```js
const { loading, status, error, data, activate } = useAxios({
method: 'get',
url: 'https://example.com/v1/items',
uuid: 'items',
onSuccess: ({ data }) => console.log(data)
})
```
Refetches can be prevented during rerenders:
```js
const { loading, status, error, data, activate } = useAxios({
method: 'get',
url: 'https://example.com/v1/items',
uuid: 'items',
immutable: true,
onSuccess: ({ data }) => console.log(data)
})
```
Null response keys can be purged:
```js
const { loading, status, error, data, activate } = useAxios({
method: 'get',
url: 'https://example.com/v1/items',
purgeNull: true,
onSuccess: ({ data }) => console.log(data)
})
```
Response keys can be transformed to camelCase:
```js
const { loading, status, error, data, activate } = useAxios({
method: 'get',
url: 'https://example.com/v1/items',
camelCased: true,
onSuccess: ({ data }) => console.log(data)
})
```
Get axios instance:
```js
import { axios } from 'frontend-essentials'
axios.defaults.withCredentials = true
```
## useFetch
Similar to useAxios but with native fetch's API:
```js
const { loading, response, status, error, data, activate } = useFetch('https://example.com/v1/items', {
mode: 'no-cors',
onSuccess: ({ data }) => console.log(data)
})
```
## useMedia
Returns a media queries object containing boolean matches for each passed query:
```js
const { mobile, tablet } = useMedia({
mobile: '(max-width: 480px)',
tablet: '(min-width: 481px) and (max-width: 1199px)'
})
const getDescription = () => {
if (mobile) return 'Hello'
if (tablet) return 'Hello Mr.'
return 'Hello Mr. Smith'
}
return
{getDescription()}
```
## useObjectState
Makes working with form state easier by returning a _setState_ that shallowly merges state like _this.setState_ does.
In addition, it returns a third _resetState_ function that reverts the form to its initial state:
```js
const [form, setForm, resetForm] = useObjectState({
name: '',
age: 18,
address: ''
})
return (
setForm({ name: event.target.value })} />
setForm({ age: event.target.value })} />
setForm({ address: event.target.value })} />
Reset
)
```
## usePersistState
Allows you to keep your current state between rerenders:
```js
const [posts, setPosts] = usePersistState('posts', [])
// will store the state in memory for the next mount
setPosts([
{ id: 1, title: 'First', content: 'Lorem' },
{ id: 2, title: 'Second', content: 'Ipsum' }
])
```
## usePersistObjectState
The combination of `usePersistState` and `useObjectState`:
```js
const [form, setForm, resetForm] = usePersistObjectState(
'student',
{
name: '',
age: 18,
address: ''
},
{ localStorage: true }
)
```
## useProgressiveImage
Returns a low quality image source until a higher resolution image is fetched:
```js
const [src, blur] = useProgressiveImage(lowQualitySrc, highQualitySrc)
return 
```
## useTransitionNavigate
Delays React Router's navigation until the target page is rendered:
```js
const navigate = useTransitionNavigate()
{
event.preventDefault()
navigate('home')
}}
>
Home
```
# Utility Functions
## lazyPrefetch
Prefetches a lazily loaded React module:
```js
const Login = lazyPrefetch(() => import('pages/Calendar'))
```
_Note: the prefetch occurs 250ms after the `load` event. If there are images in the DOM, the prefetch will occur only after they are downloaded._