react-loading-switch - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-loading-switch",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React component API for easily composing the render logic surrounding react-apollo data fetching, loading, and error handling",
@@ -5,0 +5,0 @@ "browser": "lib/index.js",

README.md

@@ -1,2 +0,2 @@
-react-loading-switch
+react-loading-switch 🐶
 ==
@@ -6,31 +6,160 @@
 
-Getting Started
+Compatible with React, React Native, React Web, React anything!
+
+The Problem:
 --
 
-```shell
-npm i --save react-loading-switch
+### Data-related conditional rendering in every component
+
+In our experience, re-writing identical or similar logic in every component is bad.
+
+ - ❌ Error prone.
+ - ❌ Multiple programming styles result in very different-looking code.
+ - ❌ Difficult to digest at a glance.
+ - ❌ Problem grows as codebase grows.
+
+#### This sucks 👎
+
+```js
+render = () => {
+  const { loading, error, puppy } = this.props.data
+
+  if (error) {
+    return <RenderError error={error} />
+  }
+
+  if (!puppy) {
+    if (loading) {
+      return <RenderLoading />
+    }
+
+    return <RenderError error={new Error('Could not find puppy!')} />
+  }
+
+  return (
+    <View>{ `Finally the puppy is here! ${puppy.id}` }</View>
+  )
+}
 ```
 
-Example
---
+### Instead, compose your rendering with `react-loading-switch`!
 
+ - ✅ Consistent JSX component API.
+ - ✅ Easy to digest at a glance.
+ - ✅ Extensible & Functional
+ - ✅ Centralized default configuration across multiple components if desired.
+ - ✅ It's just a react component. Wrap it with default props if you want to share functionality between components.
+
+#### Meet `<LoadingSwitch />` 👍
+
 ```js
+import LoadingSwitch from 'react-loading-switch'
+
 render() {
-  const { loading, error, media, artist } = this.props.data
+  const { loading, error, puppy } = this.props.data
 
-  <LoadingSwitch
-    error={error}
-    errorWhenMissing={() => new Error('Missing required data!')}
-    loading={loading}
-    renderError={(error) => <DataError error={error} />}
-    renderLoading={() => <Loading />}
-    require={media && artist}
-  >
-    { () => (
-      <Text>This is rendered when have the data! { media.id }</Text>
-    ) }
-  </LoadingSwitch>
+  return (
+    <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>
+  )
 }
 ```
 
+#### DRY it up by wrapping with some default props 🎉
+
+```js
+import MyLoadingSwitch from '../MyLoadingSwitch'
+
+render() {
+  const { loading, error, puppy } = this.props.data
+
+  return (
+    <MyLoadingSwitch
+      error={error}
+      loading={loading}
+      require={puppy}
+    >
+      { () => (
+        <View>{ `The puppy data is here! ${puppy.id}` }</View>
+      ) }
+    </MyLoadingSwitch>
+  )
+}
+```
+
+#### With React-Apollo's shiny new `<Query />` components :godmode:
+
+```js
+import LoadingSwitch from 'react-loading-switch'
+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: { puppy } }) => (
+      <LoadingSwitch
+        error={error}
+        errorWhenMissing={() => new Error('Missing puppy birthday data!')}
+        loading={loading}
+        renderError={(error) => <PuppyBirthdayError error={error} />}
+        renderLoading={() => <PuppyBirthdayLoading />}
+        require={puppy}
+      >
+        { () => (
+          <View>{ `${name}'s birthday is ${puppy.birthday}!` }</View>
+        ) }
+      </LoadingSwitch>
+    )}
+  </Query>
+)
+```
+
+#### Require multiple things! It uses JavaScript's truthy/falsey checking.
+
+*Remember falsey in JavaScript: `false || null || undefined || 0 || '' || NaN` * :neckbeard:
+
+```js
+render() {
+  const { loading, error, someData, moreData } = this.props.data
+
+  return (
+    <MyLoadingSwitch
+      error={error}
+      loading={loading}
+      require={someData && moreData && moreData.hasTheRequiredThing}
+    >
+      { () => (
+        <View>{ moreData.hasTheRequiredThing }</View>
+      ) }
+    </MyLoadingSwitch>
+  )
+}
+```
+
+Getting Started
+--
+
+```shell
+npm i --save react-loading-switch
+```
+
 API
@@ -37,0 +166,0 @@ --

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12895

increased by31.01%

Number of lines in readme file

168

increased by330.77%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes