Release 3.1.0 (#63)

* Add Breathing loader

* Refactor Shimmer loader

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-shimmer",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "React Image (Suspense-like) Loader component that simulates a shimmer effect",
   "author": "gokcan",
   "keywords": [

src/Image.tsx

@@ -1,6 +1,6 @@
 /**
  * @class SuspenseImage
- * @version 3.0.3
+ * @version 3.1.0
  * @author github.com/gokcan
  */
 

src/index.ts

@@ -2,5 +2,6 @@ export { default } from './Image'
 export type { ImageProps } from './Image'
 
 // Loaders
-export { Shimmer } from './loaders/shimmer/Shimmer'
+export * from './loaders'
 export type { ShimmerProps } from './loaders/shimmer/Shimmer'
+export type { BreathingProps } from './loaders/breathing/Breathing'

src/loaders/breathing/Breathing.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import clsx from 'clsx'
+
+import './styles.css'
+
+export interface BreathingProps {
+  className?: string
+  duration?: number
+  height?: number
+  width?: number
+}
+
+const DEFAULT_DURATION_MS = 1000
+
+export const Breathing = ({ className, duration = DEFAULT_DURATION_MS, height, width }: BreathingProps) => {
+  const style = { height, width, animationDuration: `${(duration / 1000).toFixed(1)}s` }
+  return <div className={clsx('breathing', className)} style={style} />
+}
+
+Breathing.propTypes = {
+  className: PropTypes.string,
+  duration: PropTypes.number,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}

src/loaders/breathing/README.md

@@ -0,0 +1,48 @@
+### Breathing Loader
+
+## Usage
+
+```jsx
+import React from 'react'
+import Image, { Breathing } from 'react-shimmer'
+
+function App(props) {
+  return (
+    <div>
+      <Image
+        src='https://source.unsplash.com/random'
+        fallback={<Breathing />}
+      />
+    </div>
+  )
+}
+```
+
+or as a standalone placeholder:
+
+```jsx
+import React from 'react'
+import { Breathing } from 'react-shimmer'
+
+function App(props) {
+  return (
+    <div>
+      <Breathing />
+    </div>
+  )
+}
+```
+
+### Properties
+
+Property | Type | Required | Default value | Description
+:--- | :--- | :--- | :--- | :---
+`className`|string|no|| Override default styles with className
+`width`|number|no||
+`height`|number|no||
+`duration`|number|no|`1000`| Animation duration (ms)
+-----
+
+## License
+
+MIT © [gokcan](https://github.com/gokcan)

src/loaders/breathing/styles.css

@@ -0,0 +1,19 @@
+:root {
+  --default-bg-color: #e1e2e4;
+}
+
+.breathing {
+  width: 100%;
+  height: 100%;
+  background: var(--default-bg-color);
+  animation: breathing ease-in-out infinite alternate;
+}
+
+@keyframes breathing {
+  from {
+    opacity: 0.25;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/loaders/index.ts

@@ -1 +1,2 @@
 export { Shimmer } from './shimmer/Shimmer'
+export { Breathing } from './breathing/Breathing'

src/loaders/shimmer/README.md

@@ -18,13 +18,28 @@ function App(props) {
 }
 ```
 
+or as a standalone placeholder:
+
+```jsx
+import React from 'react'
+import { Shimmer } from 'react-shimmer'
+
+function App(props) {
+  return (
+    <div>
+      <Shimmer width={280} height={60} />
+    </div>
+  )
+}
+```
+
 ### Properties
 
 Property | Type | Required | Default value | Description
 :--- | :--- | :--- | :--- | :---
 `width`|number|yes||
 `height`|number|yes||
-`color`|string|no|`#f6f7f8`| Background color of the loader
+`className`|string|no|| Override default styles with className
 `duration`|number|no|`1600`| Animation duration (ms)
 -----
 

src/loaders/shimmer/Shimmer.tsx

@@ -24,7 +24,7 @@ export const Shimmer = ({ className, duration, height = DEFAULT_HEIGHT, width =
   const shimmerStyle = calcShimmerStyle(width, height, duration)
   const style = { ...shimmerStyle, ...{ height, width } }
 
-  return <span className={clsx('shimmer', className)} style={style} />
+  return <div className={clsx('shimmer', className)} style={style} />
 }
 
 Shimmer.propTypes = {

src/loaders/shimmer/styles.css

@@ -1,21 +1,31 @@
+:root {
+  --default-bg-color: #f6f7f8;
+  --default-bg-moving-gradient: linear-gradient(to right, rgb(238, 238, 238) 8%, rgb(222, 222, 222) 18%,  rgb(238, 238, 238) 33%);
+}
+
 .shimmer {
-  background: #f6f7f8;
-	background-image: linear-gradient(to right, rgb(238, 238, 238) 8%, rgb(222, 222, 222) 18%,  rgb(238, 238, 238) 33%);
+  background: var(--default-bg-color);
+	background-image: var(--default-bg-moving-gradient);
   background-repeat: no-repeat;
-  animation: shimmering 1.6s forwards infinite ease-in-out, fadein 0.02s forwards;
+  animation: shimmering forwards infinite ease-in-out, fadein 0.02s forwards;
 }
 
 @keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes shimmering {
-	0% {
+	from {
 		background-position: top right;
 	}
 
-	100% {
+	to {
 		background-position: top left;
 	}
 }