@avidian/hooks
v2.1.0
Published
React helper hooks for convenience
Downloads
3
Readme
@avidian/hooks
React helper hooks for convenience
Installation
npm
npm install @avidian/hooks
yarn
yarn add @avidian/hooks
Usage
useURL
Used to generate route path relative to the current component and route. (react-router-dom or react-router-native)
Example (using react-router-dom)
import React, { FC } from 'react';
import { Switch, Route } from 'react-router-dom';
import { useURL } from '@avidian/hooks';
import Form from './Form';
import List from './List';
export default function Component(props) => {
const url = useURL();
return (
<Switch>
<Route path={url('')} exact component={List} />
<Route path={url('/add')} component={Form} />
<Route path={url('/:id/edit')} component={Form} />
</Switch>
);
};
useMode
Used for determining form mode (Add or Edit). Defaults to 'Add'
import React from 'react';
import { useMode } from '@avidian/hooks';
export default function Form(props) {
const [mode, setMode] = useMode();
const match = useRouteMatch<{ id: string }>();
const id = match.params.id;
const fetchData = async (id) => {
//
};
useEffect(() => {
if (match.path.includes('edit')) {
setMode('Edit');
fetchData(id);
}
}, []);
return (
<div>
{mode} Data
<form>
<input />
<button type='submit' >submit</button>
</form>
</div>
);
}
useNullable
Define state that can be null.
import React from 'react';
import { useNullable } from '@avidian/hooks';
export default function Component() {
const [numberOrNull, setNumberOrNull] = useNullable(15);
return (
<button onClick={() => {
// errors if you're using typescript
setNumberOrNull('1');
setNumberOrNull({});
setNumberOrNull();
// works
setNumberOrNull(0);
setNumberOrNull(null);
}}>
click me
</button>
);
}
useArray
Define an array as state.
import React from 'react';
import { useArray } from '@avidian/hooks';
export default function Component() {
// defaults to an array instead of undefined
const [array, setArray] = useArray();
// ...
}
useArrayComplex
Define an array as state with it's helper methods. Using the helper methods will automatically mutate the array state for you.
import React from 'react';
import { useComplexArray } from '@avidian/hooks';
export default function Component() {
const { array, set, push, filter, update, remove, clear } = useComplexArray();
// ...
}
usePartial
It's the same as useState({})
but it's useful in typescript, it makes the properties of the object optional with the Partial<T>
generic.
import React from 'react';
// required type
type Data = {
title: string;
description: string;
}
export default function Component() {
const [value, setValue] = usePartial<Data>({
// passing an object is optional
title: 'My Title',
});
// ...
}
useToggle
Define a toggleable boolean state.
import React from 'react';
import { useToggle } from '@avidian/hooks';
export default function Component() {
const [value, toggleValue] = useToggle(false);
// explicitly set value
toggleValue(true);
// toggle the value
toggleValue();
}
useTimeout
Define a callback with a timeout
import React from 'react';
import { useTimeout } from '@avidian/hooks';
export default function Component() {
const { reset, clear } = useTimeout(() => {
// do something
}, 1000)
}
useDebounce
Define a callback with a debounce.
import React from 'react';
import { useDebounce } from '@avidian/hooks';
export default function Component() {
useDebounce(() => {
// do something
}, 5000, []);
}
useUpdateEffect
Same as useEffect
but executes after update.
import React from 'react';
import { useUpdateEffect } from '@avidian/hooks';
export default function Component() {
useUpdateEffect(() => {
// do something after render
}, []);
}
usePrevious
Stores the previous value when updated.
import React, { useState } from 'react';
import { usePrevious } from '@avidian/hooks';
export default function Component() {
const [count, setCount] = useState(0);
const value = usePrevious(count);
// `value` will be 0 after `count` is updated to `1`
setCount(1);
}
useLocalStorage and useSessionStorage
Define state that maps to a storage.
remove
sets the value to undefined
.
import React from 'react';
import { useLocalStorage, useSessionStorage, useStorage } from '@avidian/hooks';
export default function Component() {
const [value, setValue, remove] = useLocalStorage('name', 'Joe');
const [value, setValue, remove] = useSessionStorage('name', 'Joe');
// custom storage
const storage = new ClassThatImplementsStorageInterface();
const [value, setValue, remove] = useStorage('name', 'Joe', storage);
}
License
This library is open-sourced software licensed under the MIT license.