Merge pull request #233 from dvtng/srmagura/highlight-width

Custom highlight background

Author: dvtng

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 3.5.0
+
+### Features
+
+- Add optional `customHighlightBackground` prop. (#233)
+
 ## 3.4.0
 
 ### Features

README.md

@@ -235,6 +235,13 @@ return (
             </td>
             <td><code>true</code></td>
         </tr>
+        <tr>
+            <td><code>customHighlightBackground?: string</code></td>
+            <td>
+                Allows you to override the <code>background-image</code> property of the highlight element, enabling you to fully customize the gradient. See example below.
+            </td>
+            <td><code>undefined</code></td>
+        </tr>
     </tbody>
 </table>
 
@@ -273,6 +280,18 @@ const wrapped2 = (
 );
 ```
 
+### Custom Highlight Background
+
+You may want to make the gradient used in the highlight element narrower or wider. To do this, you can set the `customHighlightBackground` prop. Here's an example of a narrow highlight:
+
+```tsx
+<Skeleton customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)" />
+```
+
+**If you use this prop, the `baseColor` and `highlightColor` props are ignored,** but you can still reference their corresponding CSS variables as shown in the above example.
+
+![Custom highlight background example](assets/custom-highlight-background.png)
+
 ## Troubleshooting
 
 ### The skeleton width is 0 when the parent has `display: flex`!

assets/custom-highlight-background.png

@@ -1,6 +1,6 @@
 {
   "name": "react-loading-skeleton",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.",
   "keywords": [
     "react",

package.json

@@ -18,6 +18,8 @@ function styleOptionsToCssProperties({
   direction,
   duration,
   enableAnimation = defaultEnableAnimation,
+
+  customHighlightBackground,
 }: SkeletonStyleProps & { circle: boolean }): CSSProperties &
   Record<`--${string}`, string> {
   const style: ReturnType<typeof styleOptionsToCssProperties> = {};
@@ -41,6 +43,9 @@ function styleOptionsToCssProperties({
   if (typeof highlightColor !== 'undefined')
     style['--highlight-color'] = highlightColor;
 
+  if (typeof customHighlightBackground === 'string')
+    style['--custom-highlight-background'] = customHighlightBackground;
+
   return style;
 }
 

src/Skeleton.tsx

@@ -10,4 +10,6 @@ export interface SkeletonStyleProps {
   duration?: number;
   direction?: 'ltr' | 'rtl';
   enableAnimation?: boolean;
+
+  customHighlightBackground?: string;
 }

src/SkeletonStyleProps.ts

@@ -427,3 +427,34 @@ export const PrefersReducedMotion = () => (
     />
   </div>
 );
+
+export const HighlightWidth = () => (
+  <div style={{ width: 500 }}>
+    <p>Default</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%)"
+    />
+    <br />
+
+    <p>Narrow highlight</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)"
+    />
+    <br />
+
+    <p>Wide highlight</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 5%, var(--highlight-color) 95%, var(--base-color) 100%)"
+    />
+    <br />
+
+    <p>Fun gradient</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, rgba(131,58,180,1) 25%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 75%, var(--base-color) 100%)"
+    />
+  </div>
+);

src/__stories__/Skeleton.stories.tsx

@@ -32,11 +32,14 @@
   right: 0;
   height: 100%;
   background-repeat: no-repeat;
-  background-image: linear-gradient(
-    90deg,
-    var(--base-color),
-    var(--highlight-color),
-    var(--base-color)
+  background-image: var(
+    --custom-highlight-background,
+    linear-gradient(
+      90deg,
+      var(--base-color) 0%,
+      var(--highlight-color) 50%,
+      var(--base-color) 100%
+    )
   );
   transform: translateX(-100%);
 

src/skeleton.css

@@ -5,7 +5,7 @@
     "jsx": "react",
 
     /* Modules */
-    "module": "ESNext",
+    "module": "nodenext",
     "moduleResolution": "nodenext",
 
     /* Emit */