1.0.0 • Published 7 months ago
react-until-interactive v1.0.0
react-until-interactive
Do somethings until user interactive
Somethings like:
- Third party libraries
- Heavy assets
- Complex computation
- Not so important actions
- ...
Install
npm install jyunhanlin/react-until-interactive
Usage
Vanilla JS
example
// import { UntilInteractiveCore } from 'react-until-interactive/until-interactive-core';
import { UntilInteractiveCore } from 'react-until-interactive';
const untilInteractive = new UntilInteractiveCore({
events: ['mousemove', 'click', 'scroll'],
idle: true,
cache: false,
threshold: 10,
interactiveFn: () => {
// Do something until user interactive
},
onInteractive: (result) => {
// Do something for the result
},
onError: (error) => {
// Do something for the error
},
});
The UntilInteractiveCore(options: object)
class
options
interactiveFn
: interactive function.- type: () => any;
- required
events
: the events that triggerinteractiveFn
.- type: array\<keyof HTMLElementEventMap>
- default: 'mousemove', 'click', 'scroll'
idle
: userequestIdleCallback
to triggerinteractiveFn
.- type: boolean
- default: true
cache
: cache the return value frominteractiveFn
.- type: boolean
- default: false
threshold
: delay a number to triggerinteractiveFn
.- type: number
- optional
onInteractive
: on interactive function. take the result frominteractiveFn
as parameter.- type: (result: any) => Promise\<any>;
- optional
onError
: on error function. take the error as parameter.- type: (error: Error) => void;
- optional
React Hook
example
// import { useUntilInteractive } from 'react-until-interactive/use-until-interactive';
import { useUntilInteractive } from 'react-until-interactive';
const { isLoading, isError, data } = useUntilInteractive(
{
interactiveFn: () =>
new Promise((resolve) => {
setTimeout(() => {
console.log('useUntilInteractive');
resolve('');
}, 1000);
}),
},
[],
);
The useUntilInteractive(options, deps)
hook
options
The same options with Vanilla JS
deps
- type: React.DependencyList
- optional
The return object
- isLoading
- type: boolean
- isError
- type: boolean
- data: the return value from
interactiveFn
- type: any
React Component
example
// import { UntilInteractive } from 'react-until-interactive/react-until-interactive';
import { UntilInteractive } from 'react-until-interactive';
<UntilInteractive
untilInteractiveOptions={{
interactiveFn: () =>
new Promise((resolve) => {
setTimeout(() => {
console.log('UntilInteractive');
resolve('');
}, 2000);
}),
}}
>
{({ isLoading }) => (isLoading ? 'wait for UntilInteractive' : 'UntilInteractive done')}
</UntilInteractive>;
props
- untilInteractiveOptions
- The same options with Vanilla JS
- children
- type: React.ReactNode | ((args: { isLoading: boolean; isError: boolean }) => React.ReactNode)
- optional
1.0.1-rc.1
7 months ago
1.0.0
11 months ago
1.0.0-rc.20
12 months ago
1.0.0-rc.21
12 months ago
1.0.0-rc.17
12 months ago
1.0.0-rc.19
12 months ago
1.0.0-rc.18
12 months ago
1.0.0-rc.9
1 year ago
1.0.0-rc.7
1 year ago
1.0.0-rc.8
1 year ago
1.0.0-rc.5
1 year ago
1.0.0-rc.6
1 year ago
1.0.0-beta.2
1 year ago
1.0.0-beta.3
1 year ago
1.0.0-beta.1
1 year ago
1.0.0-rc.13
1 year ago
1.0.0-rc.12
1 year ago
1.0.0-rc.11
1 year ago
1.0.0-rc.10
1 year ago
1.0.0-rc.3
1 year ago
1.0.0-rc.16
1 year ago
1.0.0-rc.4
1 year ago
1.0.0-rc.15
1 year ago
1.0.0-rc.1
1 year ago
1.0.0-rc.14
1 year ago
1.0.0-rc.2
1 year ago
1.0.0-alpha.1
2 years ago