refactor: Remove cls render prop argument

BREAKING CHANGE
The cls property was not adding much, since we are not using it
as a hook for styling in the library. There is an argument that
we could use it for fallbacks, but that requires the user to
set the style tag anyway. Thus, it is best to leave it undefined.
It also bloated the syntax quite a bit, with a mess of squgglies
that can easily be messed up; JSX prop, arrow function, and then
destructuring. {({cls}) => ... }. I think this is more convenient
for people to use, especially weighed against the lack of benefit
to the library.

Author: fpapado

README.md

@@ -106,12 +106,8 @@ import { LazyImage } from "react-lazy-images";
 
 <LazyImage
   src="https://www.fillmurray.com/g/600/400"
-  placeholder={({ cls }) => (
-    <img src="https://www.fillmurray.com/g/60/40" className={cls} />
-  )}
-  actual={({ cls }) => (
-    <img src="https://www.fillmurray.com/g/600/400" className={cls} />
-  )}
+  placeholder={() => <img src="https://www.fillmurray.com/g/60/40" />}
+  actual={() => <img src="https://www.fillmurray.com/g/600/400" />}
 />;
 ```
 
@@ -135,28 +131,28 @@ Thus, whether you want to display a simple `<img>`, your own `<Image>`, or even
   src={https://www.fillmurray.com/g/600/400}
   // This is rendered first
   placeholder={
-    ({cls}) =>
-      <img src="https://www.fillmurray.com/g/60/40" className={cls} />
+    () =>
+      <img src="https://www.fillmurray.com/g/60/40" />
   }
   // This is rendered once in view
   actual={
-    ({cls}) =>
-      <img src="https://www.fillmurray.com/g/600/400" className={cls} />
+    () =>
+      <img src="https://www.fillmurray.com/g/600/400" />
   }
 />
 
 // Perhaps you want a container?
 <LazyImage
   placeholder={
-    ({cls}) =>
-      <div className={`LazyImage-Placeholder ${cls}`}">
+    () =>
+      <div className={`LazyImage-Placeholder`}">
         <img src="https://www.fillmurray.com/g/60/40"/>
       </div>
   }
   actual={
-    ({cls}) =>
-      <div className={`LazyImage-Actual ${cls}`}>
-        <img src="https://www.fillmurray.com/g/600/400" className={cls} />
+    () =>
+      <div className={`LazyImage-Actual`}>
+        <img src="https://www.fillmurray.com/g/600/400" />
       </div>
   }
 />
@@ -178,15 +174,15 @@ This behaviour is provided with the `src` prop:
 <LazyImage
   src="https://www.fillmurray.com/g/600/400"
   placeholder={
-    ({cls}) =>
-      <div className={`LazyImage-Placeholder ${cls}`}">
+    () =>
+      <div className={`LazyImage-Placeholder`}">
         <img src="https://www.fillmurray.com/g/60/40"/>
       </div>
   }
   actual={
-    ({cls}) =>
-      <div className={`LazyImage-Actual ${cls}`}>
-        <img src="https://www.fillmurray.com/g/600/400" className={cls} />
+    () =>
+      <div className={`LazyImage-Actual`}>
+        <img src="https://www.fillmurray.com/g/600/400" />
       </div>
   }
 />
@@ -202,17 +198,14 @@ You can choose what to display on Loading and Error using the render props `load
 <div className="bg-light-silver h5 w-100">
   <LazyImage
     src="https://www.fillmurray.com/notanimage"
-    placeholder={({ cls }) => <div className={cls} />}
-    actual={({ cls }) => (
-      <img src="https://www.fillmurray.com/notanimage" className={cls} />
-    )}
-    loading={({ cls }) => (
-      <div className={cls}>
+    actual={() => <img src="https://www.fillmurray.com/notanimage" />}
+    loading={() => (
+      <div>
         <p className="pa3 f5 lh-copy near-white">Loading...</p>
       </div>
     )}
-    error={({ cls }) => (
-      <div className={`bg-light-red h-100 w-100 ${cls}`}>
+    error={() => (
+      <div className="bg-light-red h-100 w-100">
         <p>There was an error fetching this image :(</p>
       </div>
     )}
@@ -235,12 +228,8 @@ This behaviour is available by using a `loadEagerly` prop:
 <LazyImage
   loadEagerly
   src="https://www.fillmurray.com/g/600/400"
-  placeholder={({ cls }) => (
-    <img src="https://www.fillmurray.com/g/60/40" className={cls} />
-  )}
-  actual={({ cls }) => (
-    <img src="https://www.fillmurray.com/g/600/400" className={cls} />
-  )}
+  placeholder={() => <img src="https://www.fillmurray.com/g/60/40" />}
+  actual={() => <img src="https://www.fillmurray.com/g/600/400" />}
 />
 ```
 

src/LazyImage.tsx

@@ -4,9 +4,7 @@ import Observer, {IntersectionObserverProps} from 'react-intersection-observer';
 /**
  * Values that the render props take
  */
-interface RenderPropArgs {
-  cls: string;
-}
+// interface RenderPropArgs {}
 
 /**
  * Valid props for LazyImage
@@ -17,22 +15,22 @@ export interface LazyImageProps {
   srcSet?: string;
 
   /** Component to display once image has loaded */
-  actual: (RenderPropArgs) => React.ReactElement<{}>;
+  actual: () => React.ReactElement<{}>;
 
   /** Component to display while image has not been requested
    * @default: undefined
    */
-  placeholder?: (RenderPropArgs) => React.ReactElement<{}>;
+  placeholder?: () => React.ReactElement<{}>;
 
   /** Component to display while the image is loading
    * @default placeholder, if defined
    */
-  loading?: (RenderPropArgs) => React.ReactElement<{}>;
+  loading?: () => React.ReactElement<{}>;
 
   /** Component to display if the image fails to load
    * @default actual (broken image)
    */
-  error?: (RenderPropArgs) => React.ReactElement<{}>;
+  error?: () => React.ReactElement<{}>;
 
   /** Whether to skip checking for viewport and always show the 'actual' component
    * @see https://github.com/fpapado/react-lazy-images/#eager-loading--server-side-rendering-ssr
@@ -128,11 +126,7 @@ export class LazyImage extends React.Component<LazyImageProps, LazyImageState> {
   }
 
   renderEager({actual}: LazyImageProps) {
-    return (
-      <React.Fragment>
-        {actual({cls: 'LazyImage LazyImage-Actual'})}
-      </React.Fragment>
-    );
+    return <React.Fragment>{actual()}</React.Fragment>;
   }
 
   renderLazy(state, {observerProps, ...rest}: LazyImageProps) {
@@ -158,25 +152,18 @@ export class LazyImage extends React.Component<LazyImageProps, LazyImageState> {
   ) {
     switch (imageState) {
       case 'NotAsked':
-        return (
-          !!placeholder && placeholder({cls: 'LazyImage LazyImage-Placeholder'})
-        );
+        return !!placeholder && placeholder();
 
       case 'Loading':
         // Only render loading if specified, otherwise placeholder
-        return !!loading
-          ? loading({cls: 'LazyImage LazyImage-Loading'})
-          : !!placeholder &&
-              placeholder({cls: 'LazyImage LazyImage-Placeholder'});
+        return !!loading ? loading() : !!placeholder && placeholder();
 
       case 'LoadSuccess':
-        return actual({cls: 'LazyImage LazyImage-Placeholder'});
+        return actual();
 
       case 'LoadError':
         // Only render error if specified, otherwise actual
-        return !!error
-          ? error({cls: 'LazyImage LazyImage-Error'})
-          : actual({cls: 'LazyImage LazyImage-Placeholder'});
+        return !!error ? error() : actual();
     }
   }
 }