![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@formoe/use-async
Advanced tools
Readme
Provides functionality to simplify async operations in the UI.
You can use the hook directly like this
import useAsync from "@formoe/use-async"
const asyncFunction = async (incomingRequest) => {
// ... do something async here with the incoming request:
// { body: "Foo" }
return "Yay"
}
const initialRequest = {
body: "Foo"
}
const { result, inProgress, setRequest } = useAsync({ asyncFunction, initialRequest })
initialRequest
can be ommitted which results in the hook not making an initial request. If you need to make an initial call without a request, you can hand in null
. This will also be given to your async function but you can choose to ignore it of course.
the interface is as follows:
{
result: {
request, // carries the request with wich the result was received => for the above code: { body: "Foo }
response, // the return value of the async function if it succeeds (undefined on error) => for the above code: "Yay"
error, // the error if the async function throws / rejects (undefined on success)
},
inProgress, // a boolean indicating whether or not the async process is running
setRequest, // trigger a new request
}
with setRequest
you can start a new request or retrigger the old one.
const newRequest = {
body: "Bar"
}
setRequest(newRequest)
This helper component provides a simple way to react to the state of your async process. Simply hand in the result and inProgress values from the hook and the corresponding skeletons are rendered:
import { StateSkeletons } from "@formoe/use-async"
<StateSkeletons
response={result.response}}
skeleton={<div>not initialized</div>}
errorConfig={error: result.error, skeleton: <div>error</div>}
progressConfig={inProgress, skeleton: <div>in progress</div>}
>
<div>success</div>
</StateSkeletons>
children
: the component tree to render on successerrorConfig
(optional): an object with a component tree (skeleton) to render if an error occurs during the async process (error property of the config is truthy). If not provided the skeleton is rendered and your component does not provide visual feedback to errors.skeleton
(optional): a component tree to render if the async process didn't run yet. If not provided the next valid skeleton is rendered and your component has to cope with and an uninitialized state. This skeleton should indicate loading.progressConfig
(optional): an object with a component tree (skeleton) to render while async process is running (inProgress property of the config is truthy). If not provided children are rendered and your component does not provide visual feedback for the async operation.In addition the components inside the skeletons can access the corresponmding state with the useResponse
, useError
and useInProgress
hooks via the context wrapped around them by the StateSkeletons
component.
For examples on how to use this refer to the tests.
If you don't need to react to the response of the result but only render different things depending on it's state (for example disabling a button on posting form values), you can use this wrapper. The results are avaiable through call backs if you need to evaluate them.
Also as the wrapper uses StateSkeletons
, components inside the tree can use the hooks described there to access the state.
import { AsyncComponentWrapper } from "@formoe/use-async"
const asyncFunction = async (incomingRequest) => {
// ... do something async here with the incoming request:
// { body: "Foo" }
return "Yay"
}
const request = {
body: "Foo"
}
<AsyncComponentWrapper asyncFunction={asyncFunction} request={request}>
<div>success</div>
</AsyncComponentWrapper>
The component provides the following property interface:
asyncFunction
: an async function (see hook)request
(optional): the request send to the async function (see hook), nothing will happen unless setonSuccess
(optional): a success callback called with the complete result on success.onError
(optional): an error callback called with the complete result on error. If not provided the children are rendered.onProgressChange
(optional): a callback triggered when the progress state of the async operation changes.StateSkeletons
aboveFAQs
Provides functionality to simplify async operations in the UI.
The npm package @formoe/use-async receives a total of 147 weekly downloads. As such, @formoe/use-async popularity was classified as not popular.
We found that @formoe/use-async demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.