Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-loading-switch
Advanced tools
Readme
React component API for easily composing the render logic surrounding react-apollo data fetching, loading, and error handling.
Compatible with React, React Native, React Web, React anything!
npm i --save react-loading-switch
In our experience, re-writing identical or similar logic in every component can lead to problems ❌
if (loading)
and if (error)
👋With react-loading-switch, we won't need this:
const Puppy = ({ loading, error, puppy }) => {
if (error) {
return <RenderError error={error} />
}
if (!puppy) {
if (loading) {
return <RenderLoading />
}
return <RenderError error={new Error('Missing puppy data!')} />
}
return (
<View>{ `Finally the puppy is here! ${puppy.id}` }</View>
)
}
We won't need this:
const Puppy = ({ loading, error, puppy }) => {
if (loading) return <RenderLoading />
if (error) return <RenderError error={error} />
return <View>{ `Finally the puppy is here! ${puppy.id}` }</View>
}
react-loading-switch
✅<LoadingSwitch />
🍻This example uses all available props, but in practice it gets cleaner:
import LoadingSwitch from 'react-loading-switch'
const Puppy = ({ loading, error, puppy }) => (
<LoadingSwitch
error={error}
errorWhenMissing={() => new Error('Missing puppy data!')}
loading={loading}
renderError={(error) => <DataError error={error} />}
renderLoading={() => <Loading />}
require={puppy}
>
{ () => (
<View>{ `The puppy data is here! ${puppy.id}` }</View>
) }
</LoadingSwitch>
)
Share identical behavior across similar components 👩👦👦
import LoadingSwitch from 'react-loading-switch'
export const PuppyLoadingSwitch = (props) => (
<LoadingSwitch
errorWhenMissing={() => new Error('Could not find puppy!')}
renderLoading={() => <p>Loading puppies...</p>}
renderError={(error) => <p>Error: {error.message}</p>}
{...props}
/>
)
<PuppyLoadingSwitch />
in every component that shares this logicNow we're talkin' 🎉
import PuppyLoadingSwitch from '../PuppyLoadingSwitch'
const Puppy = ({ loading, error, puppy }) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={puppy}
>
{ () => (
<View>{ `The puppy data is here! ${puppy.id}` }</View>
) }
</PuppyLoadingSwitch>
)
You can use one LoadingSwitch component for your entire application, or you can use different LoadingSwitches in different areas. It's up to you!
require
This optional feature allows us to avoid long property lookup chains in JSX.
Compare the below to the above. Notice the lack of data.puppy.whatever
const PuppyBirthday = ({ loading, error, data}) => (
<PuppyLoadingSwitch
/* ... */
require={data && data.puppy}
>
{ ({ name, birthday }) => (
<View>{ `${name}'s birthday is ${birthday}!` }</View>
) }
</PuppyLoadingSwitch>
)
<Query />
componentsimport PuppyLoadingSwitch from '../PuppyLoadingSwitch'
import { Query } from 'react-apollo'
const GET_PUPPY = gql`
query puppy($puppyId: ID!) {
puppy(id: $puppyId) {
id
name
birthday
}
}
`;
const PuppyBirthday = ({ puppyId }) => (
<Query query={GET_PUPPY} variables={{ puppyId }}>
{({ loading, error, data}) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={data && data.puppy}
>
{ ({ name, birthday }) => (
<View>{ `${name}'s birthday is ${birthday}!` }</View>
) }
</PuppyLoadingSwitch>
)}
</Query>
)
require
prop uses JavaScript truthy/falsey checking.Falsey in JavaScript: false || null || undefined || 0 || '' || NaN
const Puppy = ({ loading, error, someData, moreData }) => (
<PuppyLoadingSwitch
/* ... */
require={someData && moreData && moreData.foo}
>
{ () => (
<View>{ moreData.foo.name }</View>
) }
</PuppyLoadingSwitch>
)
See the test/ directory in this repo for detailed snapshot tests that cover the whole API.
Most of the React-Apollo example apps use this pattern, where loading takes precedence:
export const Character = withCharacter(({ loading, hero, error }) => {
if (loading) return <div>Loading</div>;
// ...
fetchPolicy: 'cache-and-network'
conflicts with the aboveExcerpt from the apollo-client
README
However, just because
data.loading
is true it does not mean that you won’t have data. For instance, if you already havedata.todos
, but you want to get the latest todos from your APIdata.loading
might be true, but you will still have the todos from your previous request.
tl;dr we might still want to render the data we have, even if loading === true
.
data
before loading
As long as there is no error
, and require
is truthy, it renders its children
; even if loading === true
. Now we can safely use the cache-and-network
fetch-policy with no chance of seeing a loading state when we have data we could be rendering.
From src/LoadingSwitch.js
if (error) {
return renderError(error)
}
if (!require) {
if (loading) {
return renderLoading()
}
if (errorWhenMissing) {
return renderError(typeof errorWhenMissing === 'function' ? errorWhenMissing() : errorWhenMissing)
}
}
return children(require)
In this example, renderLoading
will be rendered if loading
is truthy, even if we have some other data:
require={!loading && puppy}
Now when loading
is truthy require
evaluates falsey.
import PuppyLoadingSwitch from '../PuppyLoadingSwitch'
const Puppy = ({ loading, error, puppy }) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={!loading && puppy}
>
{ () => (
<View>
{ `We are not loading and the puppy data is here! ${puppy.id}` }
</View>
) }
</PuppyLoadingSwitch>
)
Or, if we only care about loading
and error
, we don't need to check for data presence:
import PuppyLoadingSwitch from '../PuppyLoadingSwitch'
const Puppy = ({ loading, error, puppy }) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={!loading}
>
{ () => (
<View>
{ `We are not loading! ${puppy.id}` }
</View>
) }
</PuppyLoadingSwitch>
)
FAQs
React component API for easily composing the render logic surrounding react-apollo data fetching, loading, and error handling
The npm package react-loading-switch receives a total of 694 weekly downloads. As such, react-loading-switch popularity was classified as not popular.
We found that react-loading-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.