new useLoader hook api? #549
davidhu2000
started this conversation in
Ideas
Replies: 1 comment
-
import { useLoader } from 'react-spinners';
function Proposal() {
// 2nd param includes most of the existing props minus the ones extracted away, like color/loading
const [Loader, toggleLoader] = useLoader("BarLoader", { height: 20, width: 20, color: 'blue' });
return (
<>
<Loader /> // no need to worry about props, all handled by the hook
<button onClick={toggleLoader}>Toggle</button>
</>
);
} I think having the API more closely match the existing react hooks makes more sense. Also, I don't think changing color is a typical use case as most usage is more about setting a color on the initial render. So showing/hiding the loader will be exposed in the response. And color can be set in the 2nd params. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I've been thinking about whether creating a new react hook that gives access to all the loaders will be a simpler API to use compared to the current way.
current usage
potential proposal?
I see a few benefits of using the hooks
state management is extracted away.
loading
prop is really the one that is most likely to change through the lifecycle of the component. Color may change, but less likely, so we can easily douseLoader("BarLoader", { color: 'blue' })
and make it so if the user wants to toggle color, they'd have to do it in a separatesetState
.changing the loader will be much easier, just need to update
Potential issues
I have a working demo. It requires two changes
es2020
in order to use dynamic imports. Which seems pretty well supported<Suspense>
which appears to no longer be experimental?Beta Was this translation helpful? Give feedback.
All reactions