react-skeletonify 1.0.2 → 1.1.0

package/README.md

@@ -2,9 +2,10 @@
 [![npm downloads](https://img.shields.io/npm/dm/react-skeletonify.svg)](https://www.npmjs.com/package/react-skeletonify)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
-# React Skeletonify
+# ⚡ React Skeletonify
 
-React Skeletonify is a lightweight React skeleton loader component. Create beautiful loading placeholders for text, images, buttons, or cards with smooth animations.
+A **lightweight and flexible skeleton loader** for React, built to make loading states feel smooth and natural.  
+Unlike traditional static skeletons, **React Skeletonify** adapts to your components dynamically — letting you configure animations, styles, and exclusions globally or per-component.
 
 ## 🎮 Live Demo
 
@@ -12,10 +13,12 @@ React Skeletonify is a lightweight React skeleton loader component. Create beaut
 
 ## ✨ Features
 
-- Lightweight and dependency-free
-- Easy to wrap around any component
-- Smooth animations
-- Customizable styles
+- 🎨 **Global & local configuration** with `SkeletonProvider` and `SkeletonWrapper`
+- ⚡ **Smooth animations** with multiple presets
+- 🛠️ **Highly customizable** styles, backgrounds, borders, and speed
+- 🧩 Works with **any React component**
+- 🧃 Exclude tags or groups (text, form, media, etc.) from skeleton rendering
+- 🪶 Lightweight, no external dependencies
 
 ## 🚀 Installation
 
@@ -25,32 +28,41 @@ npm install react-skeletonify
 yarn add react-skeletonify
 ```
 
-```bash
-import "react-skeletonify/dist/index.css";
+Import styles once:
 
+```tsx
+import "react-skeletonify/dist/index.css";
 ```
 
-## Example
+## 🔥 Quick Example
 
-```jsx
+```tsx
 import React from "react";
-import { SkeletonWrapper } from "react-skeletonify";
+import { SkeletonProvider, SkeletonWrapper } from "react-skeletonify";
 import "react-skeletonify/dist/index.css";
 
 function App() {
   return (
-    <SkeletonWrapper loading={true}>
-      <div style={{ height: "100px", width: "500px", padding: "10px" }}>
-        <div
-          style={{
-            height: "50px",
-            width: "50px",
-            borderRadius: "100%",
-          }}></div>
-        <h6>React Skeletonify</h6>
-        <p>Example React component for creating loading skeleton</p>
-      </div>
-    </SkeletonWrapper>
+    <SkeletonProvider
+      config={{
+        animation: "animation-1",
+        borderRadius: "8px",
+        animationSpeed: 3,
+      }}>
+      <SkeletonWrapper loading={true}>
+        <div style={{ height: "120px", width: "400px", padding: "10px" }}>
+          <div
+            style={{
+              height: "50px",
+              width: "50px",
+              borderRadius: "100%",
+              marginBottom: "10px",
+            }}></div>
+          <h6>React Skeletonify</h6>
+          <p>This is an example with global provider config 🚀</p>
+        </div>
+      </SkeletonWrapper>
+    </SkeletonProvider>
   );
 }
 
@@ -59,23 +71,81 @@ export default App;
 
 ## ⚙️ API
 
-### SkeletonWrapper
+### 🔹 `SkeletonProvider`
+
+Provides **global configuration** for skeletons. Wrap your app (or part of it) in this provider.
+
+| Prop     | Type                      | Default | Description            |
+| -------- | ------------------------- | ------- | ---------------------- |
+| children | `ReactNode`               | `null`  | Child components       |
+| config   | `Partial<SkeletonConfig>` | `{}`    | Global skeleton config |
+| style    | `CSSProperties`           | `{}`    | Inline style overrides |
+
+---
+
+### 🔹 `SkeletonWrapper`
+
+Wraps **specific content** and applies skeletons when `loading` is true.  
+It can **inherit** from `SkeletonProvider` or override per instance.
+
+| Prop           | Type                      | Default | Description            |
+| -------------- | ------------------------- | ------- | ---------------------- |
+| loading        | `boolean`                 | `false` | Show skeleton if true  |
+| children       | `ReactNode`               | `null`  | Content to render      |
+| overrideConfig | `Partial<SkeletonConfig>` | `{}`    | Override global config |
+| style          | `CSSProperties`           | `{}`    | Inline style overrides |
+
+---
+
+## 🎨 Configuration Options (`SkeletonConfig`)
+
+| Key             | Type                             | Default         | Description          |
+| --------------- | -------------------------------- | --------------- | -------------------- |
+| animationSpeed  | `number`                         | `3`             | Speed of animation   |
+| background      | `string`                         | `#aeaeae`       | Background color     |
+| border          | `string`                         | `"none"`        | Border style         |
+| borderRadius    | `string \| number`               | `"0"`           | Border radius        |
+| textTagsMargin  | `string`                         | `"0"`           | Margin for text tags |
+| className       | `string`                         | `""`            | Custom class         |
+| style           | `CSSProperties`                  | `{}`            | Inline styles        |
+| animation       | `"animation-1" \| "animation-2"` | `"animation-1"` | Animation type       |
+| exceptTags      | `string[]`                       | `[]`            | Excluded HTML tags   |
+| exceptTagGroups | `HtmlTagGroup[]`                 | `[]`            | Excluded tag groups  |
+
+**Available Tag Groups:**  
+`TEXT_TAGS`, `STRUCTURE_TAGS`, `METADATA_TAGS`, `LIST_TAGS`, `TABLE_TAGS`, `FORM_TAGS`, `MEDIA_TAGS`, `INTERACTIVE_TAGS`, `MISC_TAGS`
+
+---
+
+## 📦 Example with `exceptTags`
+
+```tsx
+<SkeletonWrapper
+  loading={true}
+  overrideConfig={{
+    exceptTags: ["img", "button"],
+    borderRadius: "6px",
+  }}>
+  <div>
+    <img src="/profile.jpg" alt="Profile" />
+    <h2>Hello World</h2>
+    <button>Click me</button>
+  </div>
+</SkeletonWrapper>
+```
 
-|   Prop   |   Type    | Default |                Description                |
-| :------: | :-------: | :-----: | :---------------------------------------: |
-| loading  |  boolean  |  false  | Whether to show skeletons or real content |
-| children | ReactNode |  null   |  Content you want wrapped with skeletons  |
+👉 In this case, the `img` and `button` will not be skeletonized.
 
-## Versioning
+## 📌 Versioning
 
 We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [versions](https://www.npmjs.com/package/react-skeletonify?activeTab=versions).
 
 ## 🤝 Contributing
 
-Contributions, issues, and feature requests are welcome!  
-Feel free to open a PR or issue.
+Contributions, issues, and feature requests are welcome! 🎉  
+Feel free to open a PR or an issue.
 
-## Authors
+## 👨‍💻 Author
 
 - **Sinan** - [GitHub](https://github.com/Sinan0333) · [Portfolio](http://sinan-dev.in)
 

package/dist/index.css

@@ -1,27 +1,39 @@
 /* src/styles/skeleton.css */
-.Rss-skeleton {
-  animation: Rss-skeleton-loading 1s linear infinite alternate;
-  background-color: hsl(200, 20%, 90%);
+.react-skeletonify {
   color: transparent !important;
-  border: none !important;
   outline: none !important;
   pointer-events: none !important;
-  border-radius: 8px !important;
 }
-.Rss-skeleton img {
+.react-skeletonify img {
   opacity: 0;
 }
-.Rss-skeleton a {
+.react-skeletonify a {
   text-decoration: none !important;
   color: transparent !important;
 }
-.Rss-skeleton-text {
+.react-skeletonify-text {
   margin-top: 5px !important;
 }
-.Rss-skeleton::placeholder {
+.react-skeletonify::placeholder {
   color: transparent !important;
 }
-@keyframes Rss-skeleton-loading {
+@keyframes react-skeletonify-animation-1 {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes react-skeletonify-animation-2 {
+  100% {
+    background-position: -100% 0;
+  }
+}
+@keyframes react-skeletonify-animation-3 {
   0% {
     background-color: hsl(200, 20%, 80%);
   }

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles/skeleton.css"],"sourcesContent":[".Rss-skeleton {\n  animation: Rss-skeleton-loading 1s linear infinite alternate;\n  background-color: hsl(200, 20%, 90%);\n  color: transparent !important;\n  border: none !important;\n  outline: none !important;\n  pointer-events: none !important;\n  border-radius: 8px !important;\n}\n\n.Rss-skeleton img {\n  opacity: 0;\n}\n\n.Rss-skeleton a {\n  text-decoration: none !important;\n  color: transparent !important;\n}\n\n.Rss-skeleton-text {\n  margin-top: 5px !important;\n}\n\n.Rss-skeleton::placeholder {\n  color: transparent !important;\n}\n\n@keyframes Rss-skeleton-loading {\n  0% {\n    background-color: hsl(200, 20%, 80%);\n  }\n  100% {\n    background-color: hsl(200, 20%, 95%);\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,aAAW,qBAAqB,GAAG,OAAO,SAAS;AACnD,oBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAChC,SAAO;AACP,UAAQ;AACR,WAAS;AACT,kBAAgB;AAChB,iBAAe;AACjB;AAEA,CAVC,aAUa;AACZ,WAAS;AACX;AAEA,CAdC,aAca;AACZ,mBAAiB;AACjB,SAAO;AACT;AAEA,CAAC;AACC,cAAY;AACd;AAEA,CAvBC,YAuBY;AACX,SAAO;AACT;AAEA,WA1Ba;AA2BX;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACA;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACF;","names":[]}
+{"version":3,"sources":["../src/styles/skeleton.css"],"sourcesContent":[".react-skeletonify {\n  color: transparent !important;\n  outline: none !important;\n  pointer-events: none !important;\n}\n.react-skeletonify img {\n  opacity: 0;\n}\n.react-skeletonify a {\n  text-decoration: none !important;\n  color: transparent !important;\n}\n.react-skeletonify-text {\n  margin-top: 5px !important;\n}\n.react-skeletonify::placeholder {\n  color: transparent !important;\n}\n\n/* Animation 1 */\n/* animation: react-skeletonify-animation-1 3s ease-in-out infinite;\nanimation-delay: 0.5s; */\n@keyframes react-skeletonify-animation-1 {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Animation 2 */\n/* animation: react-skeletonify-animation-2 2s infinite;*/\n@keyframes react-skeletonify-animation-2 {\n  100% {\n    background-position: -100% 0;\n  }\n}\n\n/* Animation 3 */\n/* animation: react-skeletonify-animation-3 1s linear infinite alternate; */\n@keyframes react-skeletonify-animation-3 {\n  0% {\n    background-color: hsl(200, 20%, 80%);\n  }\n  100% {\n    background-color: hsl(200, 20%, 95%);\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,WAAS;AACT,kBAAgB;AAClB;AACA,CALC,kBAKkB;AACjB,WAAS;AACX;AACA,CARC,kBAQkB;AACjB,mBAAiB;AACjB,SAAO;AACT;AACA,CAAC;AACC,cAAY;AACd;AACA,CAfC,iBAeiB;AAChB,SAAO;AACT;AAKA,WAAW;AACT;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAIA,WAAW;AACT;AACE,yBAAqB,MAAM;AAC7B;AACF;AAIA,WAAW;AACT;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACA;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACF;","names":[]}

package/dist/index.d.mts

@@ -1,9 +1,34 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+
+declare const HTML_TAG_GROUPS: readonly ["TEXT_TAGS", "STRUCTURE_TAGS", "METADATA_TAGS", "LIST_TAGS", "TABLE_TAGS", "FORM_TAGS", "MEDIA_TAGS", "INTERACTIVE_TAGS", "MISC_TAGS"];
+type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];
+type SkeletonConfig = {
+    animationSpeed: number;
+    background: string;
+    border: string;
+    borderRadius: string | number;
+    textTagsMargin: string;
+    className?: string;
+    style?: CSSProperties;
+    animation: "animation-1" | "animation-2";
+    exceptTags: string[];
+    exceptTagGroups: HtmlTagGroup[];
+};
 
 interface SkeletonWrapperProps {
     loading: boolean;
     children: React.ReactNode;
+    overrideConfig?: Partial<SkeletonConfig>;
+    style?: CSSProperties;
 }
 declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
 
-export { SkeletonWrapper };
+interface SkeletonProviderProps {
+    children: React.ReactNode;
+    config?: Partial<SkeletonConfig>;
+    style?: CSSProperties;
+}
+declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
+declare const useSkeleton: () => SkeletonConfig;
+
+export { type SkeletonConfig, SkeletonProvider, SkeletonWrapper, useSkeleton };

package/dist/index.d.ts

@@ -1,9 +1,34 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+
+declare const HTML_TAG_GROUPS: readonly ["TEXT_TAGS", "STRUCTURE_TAGS", "METADATA_TAGS", "LIST_TAGS", "TABLE_TAGS", "FORM_TAGS", "MEDIA_TAGS", "INTERACTIVE_TAGS", "MISC_TAGS"];
+type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];
+type SkeletonConfig = {
+    animationSpeed: number;
+    background: string;
+    border: string;
+    borderRadius: string | number;
+    textTagsMargin: string;
+    className?: string;
+    style?: CSSProperties;
+    animation: "animation-1" | "animation-2";
+    exceptTags: string[];
+    exceptTagGroups: HtmlTagGroup[];
+};
 
 interface SkeletonWrapperProps {
     loading: boolean;
     children: React.ReactNode;
+    overrideConfig?: Partial<SkeletonConfig>;
+    style?: CSSProperties;
 }
 declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
 
-export { SkeletonWrapper };
+interface SkeletonProviderProps {
+    children: React.ReactNode;
+    config?: Partial<SkeletonConfig>;
+    style?: CSSProperties;
+}
+declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
+declare const useSkeleton: () => SkeletonConfig;
+
+export { type SkeletonConfig, SkeletonProvider, SkeletonWrapper, useSkeleton };

package/dist/index.js

@@ -30,10 +30,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  SkeletonWrapper: () => SkeletonWrapper_default
+  SkeletonProvider: () => SkeletonProvider,
+  SkeletonWrapper: () => SkeletonWrapper_default,
+  useSkeleton: () => useSkeleton
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/SkeletonWrapper.tsx
+var import_react6 = require("react");
+
 // src/components/SkeletonElement.tsx
 var import_react4 = __toESM(require("react"));
 
@@ -42,18 +47,69 @@ var import_react3 = __toESM(require("react"));
 
 // src/utils/create-node-wrapper.ts
 var import_react = require("react");
-function createNodeWrapper(node) {
-  var _a;
+function createNodeWrapper(node, className, style) {
+  var _a, _b;
   if (!node) return null;
   return (0, import_react.createElement)(
     "div",
     {
-      className: (((_a = node == null ? void 0 : node.props) == null ? void 0 : _a.className) || "") + " Rss-skeleton"
+      className: className + (((_a = node == null ? void 0 : node.props) == null ? void 0 : _a.className) || ""),
+      style: {
+        ...style,
+        ...(_b = node == null ? void 0 : node.props) == null ? void 0 : _b.style
+      }
     },
     node
   );
 }
 
+// src/utils/create-leaf-node.ts
+var import_react2 = __toESM(require("react"));
+function createLeafNode(node, className, style) {
+  return import_react2.default.cloneElement(node, {
+    ...node.props,
+    className: className + (node.props.className || ""),
+    style: {
+      ...style,
+      ...node.props.style
+    }
+  });
+}
+
+// src/utils/create-style.ts
+var getAnimation = (animation, animationSpeed, background) => {
+  switch (animation) {
+    case "animation-1":
+      return {
+        animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,
+        background,
+        animationDelay: "0.5s"
+      };
+    case "animation-2":
+      return {
+        animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,
+        background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,
+        backgroundSize: "200% 100%",
+        backgroundPosition: "100% 0"
+      };
+    case "animation-3":
+      return {
+        animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,
+        backgroundColor: background
+      };
+  }
+};
+var create_style_default = (config) => {
+  const { animationSpeed, background, border, borderRadius, animation, style } = config;
+  const skeletonAnimation = {
+    ...getAnimation(animation, animationSpeed, background),
+    border,
+    borderRadius,
+    ...style
+  };
+  return skeletonAnimation;
+};
+
 // src/constants/tags.ts
 var TEXT_TAGS = [
   "p",
@@ -64,36 +120,161 @@ var TEXT_TAGS = [
   "h4",
   "h5",
   "h6",
-  "li"
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "mark",
+  "small",
+  "sup",
+  "sub",
+  "abbr",
+  "cite",
+  "q",
+  "blockquote",
+  "code",
+  "pre",
+  "samp",
+  "kbd",
+  "var",
+  "time",
+  "br",
+  "wbr"
+];
+var STRUCTURE_TAGS = [
+  "html",
+  "head",
+  "body",
+  "main",
+  "header",
+  "footer",
+  "nav",
+  "section",
+  "article",
+  "aside"
+];
+var METADATA_TAGS = ["base", "link", "meta", "style", "title"];
+var LIST_TAGS = ["ul", "ol", "li", "dl", "dt", "dd"];
+var TABLE_TAGS = [
+  "table",
+  "caption",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "col",
+  "colgroup"
+];
+var FORM_TAGS = [
+  "form",
+  "input",
+  "textarea",
+  "button",
+  "label",
+  "select",
+  "option",
+  "optgroup",
+  "fieldset",
+  "legend",
+  "datalist",
+  "output",
+  "meter",
+  "progress"
+];
+var MEDIA_TAGS = [
+  "img",
+  "audio",
+  "video",
+  "source",
+  "track",
+  "picture",
+  "iframe",
+  "embed",
+  "object",
+  "map",
+  "area",
+  "canvas"
+];
+var INTERACTIVE_TAGS = [
+  "details",
+  "summary",
+  "dialog",
+  "script",
+  "noscript",
+  "template"
 ];
+var MISC_TAGS = ["ins", "del", "s", "bdi", "bdo", "ruby", "rt", "rp"];
 
-// src/utils/create-leaf-node.ts
-var import_react2 = __toESM(require("react"));
-function createLeafNode(node, className = "") {
-  return import_react2.default.cloneElement(node, {
-    ...node.props,
-    className: (node.props.className || "") + " Rss-skeleton " + className
+// src/utils/check-tag-in-group.ts
+function checkTagInGroup(tag, groups) {
+  return groups.some((group) => {
+    switch (group) {
+      case "TEXT_TAGS":
+        return TEXT_TAGS.includes(tag);
+      case "STRUCTURE_TAGS":
+        return STRUCTURE_TAGS.includes(tag);
+      case "METADATA_TAGS":
+        return METADATA_TAGS.includes(tag);
+      case "LIST_TAGS":
+        return LIST_TAGS.includes(tag);
+      case "TABLE_TAGS":
+        return TABLE_TAGS.includes(tag);
+      case "FORM_TAGS":
+        return FORM_TAGS.includes(tag);
+      case "MEDIA_TAGS":
+        return MEDIA_TAGS.includes(tag);
+      case "INTERACTIVE_TAGS":
+        return INTERACTIVE_TAGS.includes(tag);
+      case "MISC_TAGS":
+        return MISC_TAGS.includes(tag);
+    }
   });
 }
 
+// src/utils/is-text-element.ts
+var is_text_element_default = (elementType) => {
+  return TEXT_TAGS.includes(elementType) || LIST_TAGS.includes(elementType);
+};
+
 // src/hooks/useAddSkelton.ts
-function useAddSkelton() {
+function useAddSkelton(config) {
+  const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;
+  const CLASS_NAME = `react-skeletonify ${className} `;
+  const style = create_style_default(config);
   const addSkeleton = (node) => {
-    if (!import_react3.default.isValidElement(node)) return createNodeWrapper(node);
+    if (!import_react3.default.isValidElement(node))
+      return createNodeWrapper(node, CLASS_NAME, style);
     const element = node;
     const { children } = element.props;
     const elementType = element.type;
+    if (typeof elementType === "string") {
+      if (exceptTags.includes(elementType)) {
+        return element;
+      }
+      const isRestrictedGroupTag = checkTagInGroup(
+        elementType,
+        exceptTagGroups
+      );
+      if (isRestrictedGroupTag) return element;
+    }
     const hasChildren = import_react3.default.Children.count(children) > 0;
     const isValidChildren = typeof children !== "string";
     if (typeof elementType === "function") {
       const rendered = elementType(element.props);
       return addSkeleton(rendered);
     }
-    if (TEXT_TAGS.includes(elementType)) {
-      return createLeafNode(node, "Rss-skeleton-text");
+    const isTextTag = is_text_element_default(elementType);
+    if (isTextTag) {
+      return createLeafNode(element, CLASS_NAME, {
+        ...style,
+        margin: textTagsMargin
+      });
     }
     if (elementType === "img") {
-      return createNodeWrapper(element);
+      return createNodeWrapper(element, CLASS_NAME, style);
     }
     if (hasChildren && isValidChildren) {
       const childWithSkeletons = import_react3.default.Children.map(children, addSkeleton);
@@ -102,36 +283,84 @@ function useAddSkelton() {
         children: childWithSkeletons
       });
     }
-    return createLeafNode(element);
+    return createLeafNode(element, CLASS_NAME, style);
   };
   return addSkeleton;
 }
 var useAddSkelton_default = useAddSkelton;
 
 // src/components/SkeletonElement.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var SkeletonElement = ({
-  children
-}) => {
-  const addSkeleton = useAddSkelton_default();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "skeleton-container", children: import_react4.default.Children.map(children, (child) => addSkeleton(child)) });
+var SkeletonElement = (props) => {
+  const { children, config } = props;
+  const addSkeleton = useAddSkelton_default(config);
+  return import_react4.default.Children.map(children, (child) => addSkeleton(child));
 };
 var SkeletonElement_default = SkeletonElement;
 
+// src/context/SkeletonContext.tsx
+var import_react5 = require("react");
+
+// src/context/skeleton-config.ts
+var defaultBackground = {
+  "animation-1": "#aeaeae",
+  "animation-2": "#e5e5e5",
+  "animation-3": "hsl(210, 20%, 90%)"
+};
+var defaultValues = {
+  animationSpeed: 3,
+  background: "#aeaeae",
+  border: "none",
+  borderRadius: "0",
+  textTagsMargin: "0",
+  className: "",
+  style: {},
+  animation: "animation-1",
+  exceptTags: [],
+  exceptTagGroups: []
+};
+
+// src/context/SkeletonContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SkeletonContext = (0, import_react5.createContext)(defaultValues);
+var SkeletonProvider = (props) => {
+  const { children, config, style } = props;
+  const { animation = defaultValues.animation, background } = config || {};
+  const value = (0, import_react5.useMemo)(
+    () => ({
+      ...defaultValues,
+      ...config,
+      background: background ? background : defaultBackground[animation],
+      style: { ...defaultValues.style, ...config == null ? void 0 : config.style, ...style }
+    }),
+    [animation, background, config, style]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonContext.Provider, { value, children });
+};
+var useSkeleton = () => (0, import_react5.useContext)(SkeletonContext);
+
 // src/components/SkeletonWrapper.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var SkeletonWrapper = ({
-  loading,
-  children
-}) => {
+var SkeletonWrapper = (props) => {
+  const { loading, children, overrideConfig, style } = props;
+  const mainConfig = useSkeleton();
+  const config = (0, import_react6.useMemo)(
+    () => ({
+      ...mainConfig,
+      ...overrideConfig,
+      style: { ...mainConfig.style, ...overrideConfig == null ? void 0 : overrideConfig.style, ...style }
+    }),
+    [overrideConfig, mainConfig]
+  );
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkeletonElement_default, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkeletonElement_default, { config, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  return children;
 };
 var SkeletonWrapper_default = SkeletonWrapper;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  SkeletonWrapper
+  SkeletonProvider,
+  SkeletonWrapper,
+  useSkeleton
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx","../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/constants/tags.ts","../src/utils/create-leaf-node.ts","../src/components/SkeletonWrapper.tsx"],"sourcesContent":["import \"./styles/skeleton.css\";\n\nexport { default as SkeletonWrapper } from \"./components/SkeletonWrapper\";\n","import React from \"react\";\nimport useAddSkelton from \"../hooks/useAddSkelton\";\n\nconst SkeletonElement: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  const addSkeleton = useAddSkelton();\n  return (\n    <div className=\"skeleton-container\">\n      {React.Children.map(children, (child) => addSkeleton(child))}\n    </div>\n  );\n};\n\nexport default SkeletonElement;\n","import React from \"react\";\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\nimport { TEXT_TAGS } from \"../constants/tags\";\nimport createLeafNode from \"../utils/create-leaf-node\";\n\nfunction useAddSkelton() {\n  const addSkeleton = (node: React.ReactNode): React.ReactNode => {\n    if (!React.isValidElement(node)) return createNodeWrapper(node as any);\n\n    const element = node as React.ReactElement<any>;\n    const { children } = element.props;\n    const elementType = element.type;\n\n    const hasChildren = React.Children.count(children) > 0;\n    const isValidChildren = typeof children !== \"string\";\n\n    if (typeof elementType === \"function\") {\n      const rendered = (elementType as any)(element.props);\n      return addSkeleton(rendered);\n    }\n\n    if (TEXT_TAGS.includes(elementType)) {\n      return createLeafNode(node, \"Rss-skeleton-text\");\n    }\n\n    if (elementType === \"img\") {\n      return createNodeWrapper(element);\n    }\n\n    if (hasChildren && isValidChildren) {\n      const childWithSkeletons = React.Children.map(children, addSkeleton);\n\n      return React.cloneElement(element, {\n        ...element.props,\n        children: childWithSkeletons,\n      } as typeof element.props);\n    }\n\n    return createLeafNode(element);\n  };\n\n  return addSkeleton;\n}\n\nexport default useAddSkelton;\n","import React, { createElement } from \"react\";\n\nexport default function createNodeWrapper(node: React.ReactElement<any>) {\n  if (!node) return null;\n\n  return createElement(\n    \"div\",\n    {\n      className: (node?.props?.className || \"\") + \" Rss-skeleton\",\n    },\n    node\n  );\n}\n","export const TEXT_TAGS = [\n  \"p\",\n  \"span\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"li\",\n];\n","import React from \"react\";\n\nexport default function createLeafNode(\n  node: React.ReactElement<any>,\n  className: string = \"\"\n): React.ReactElement {\n  return React.cloneElement(node, {\n    ...node.props,\n    className: (node.props.className || \"\") + \" Rss-skeleton \" + className,\n  } as typeof node.props);\n}\n","import React from \"react\";\nimport SkeletonElement from \"./SkeletonElement\";\n\ninterface SkeletonWrapperProps {\n  loading: boolean;\n  children: React.ReactNode;\n}\n\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = ({\n  loading,\n  children,\n}) => {\n  if (loading) {\n    return <SkeletonElement>{children}</SkeletonElement>;\n  }\n  return <>{children}</>;\n};\n\nexport default SkeletonWrapper;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkB;;;ACAlB,IAAAC,gBAAkB;;;ACAlB,mBAAqC;AAEtB,SAAR,kBAAmC,MAA+B;AAFzE;AAGE,MAAI,CAAC,KAAM,QAAO;AAElB,aAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,cAAY,kCAAM,UAAN,mBAAa,cAAa,MAAM;AAAA,IAC9C;AAAA,IACA;AAAA,EACF;AACF;;;ACZO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACVA,IAAAC,gBAAkB;AAEH,SAAR,eACL,MACA,YAAoB,IACA;AACpB,SAAO,cAAAC,QAAM,aAAa,MAAM;AAAA,IAC9B,GAAG,KAAK;AAAA,IACR,YAAY,KAAK,MAAM,aAAa,MAAM,mBAAmB;AAAA,EAC/D,CAAsB;AACxB;;;AHLA,SAAS,gBAAgB;AACvB,QAAM,cAAc,CAAC,SAA2C;AAC9D,QAAI,CAAC,cAAAC,QAAM,eAAe,IAAI,EAAG,QAAO,kBAAkB,IAAW;AAErE,UAAM,UAAU;AAChB,UAAM,EAAE,SAAS,IAAI,QAAQ;AAC7B,UAAM,cAAc,QAAQ;AAE5B,UAAM,cAAc,cAAAA,QAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,kBAAkB,OAAO,aAAa;AAE5C,QAAI,OAAO,gBAAgB,YAAY;AACrC,YAAM,WAAY,YAAoB,QAAQ,KAAK;AACnD,aAAO,YAAY,QAAQ;AAAA,IAC7B;AAEA,QAAI,UAAU,SAAS,WAAW,GAAG;AACnC,aAAO,eAAe,MAAM,mBAAmB;AAAA,IACjD;AAEA,QAAI,gBAAgB,OAAO;AACzB,aAAO,kBAAkB,OAAO;AAAA,IAClC;AAEA,QAAI,eAAe,iBAAiB;AAClC,YAAM,qBAAqB,cAAAA,QAAM,SAAS,IAAI,UAAU,WAAW;AAEnE,aAAO,cAAAA,QAAM,aAAa,SAAS;AAAA,QACjC,GAAG,QAAQ;AAAA,QACX,UAAU;AAAA,MACZ,CAAyB;AAAA,IAC3B;AAEA,WAAO,eAAe,OAAO;AAAA,EAC/B;AAEA,SAAO;AACT;AAEA,IAAO,wBAAQ;;;ADpCX;AALJ,IAAM,kBAA2D,CAAC;AAAA,EAChE;AACF,MAAM;AACJ,QAAM,cAAc,sBAAc;AAClC,SACE,4CAAC,SAAI,WAAU,sBACZ,wBAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,UAAU,YAAY,KAAK,CAAC,GAC7D;AAEJ;AAEA,IAAO,0BAAQ;;;AKDJ,IAAAC,sBAAA;AALX,IAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AACF,MAAM;AACJ,MAAI,SAAS;AACX,WAAO,6CAAC,2BAAiB,UAAS;AAAA,EACpC;AACA,SAAO,6EAAG,UAAS;AACrB;AAEA,IAAO,0BAAQ;","names":["import_react","import_react","import_react","React","React","React","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.tsx","../src/components/SkeletonWrapper.tsx","../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/utils/create-leaf-node.ts","../src/utils/create-style.ts","../src/constants/tags.ts","../src/utils/check-tag-in-group.ts","../src/utils/is-text-element.ts","../src/context/SkeletonContext.tsx","../src/context/skeleton-config.ts"],"sourcesContent":["import \"./styles/skeleton.css\";\n\nexport { default as SkeletonWrapper } from \"./components/SkeletonWrapper\";\nexport { SkeletonProvider, useSkeleton } from \"./context/SkeletonContext\";\nexport type { SkeletonConfig } from \"./context/skeleton-config\";\n","import React, { CSSProperties, useMemo } from \"react\";\nimport SkeletonElement from \"./SkeletonElement\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport { useSkeleton } from \"../context/SkeletonContext\";\n\ninterface SkeletonWrapperProps {\n  loading: boolean;\n  children: React.ReactNode;\n  overrideConfig?: Partial<SkeletonConfig>;\n  style?: CSSProperties;\n}\n\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = (props) => {\n  const { loading, children, overrideConfig, style } = props;\n  const mainConfig = useSkeleton();\n\n  const config: SkeletonConfig = useMemo(\n    () => ({\n      ...mainConfig,\n      ...overrideConfig,\n      style: { ...mainConfig.style, ...overrideConfig?.style, ...style },\n    }),\n    [overrideConfig, mainConfig]\n  );\n\n  if (loading) {\n    return <SkeletonElement config={config}>{children}</SkeletonElement>;\n  }\n  return children;\n};\n\nexport default SkeletonWrapper;\n","import React from \"react\";\nimport useAddSkelton from \"../hooks/useAddSkelton\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\ninterface SkeletonElementProps {\n  children: React.ReactNode;\n  config: SkeletonConfig;\n}\n\nconst SkeletonElement: React.FC<SkeletonElementProps> = (props) => {\n  const { children, config } = props;\n  const addSkeleton = useAddSkelton(config);\n\n  return React.Children.map(children, (child) => addSkeleton(child));\n};\n\nexport default SkeletonElement;\n","import React from \"react\";\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\nimport createLeafNode from \"../utils/create-leaf-node\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport createStyle from \"../utils/create-style\";\nimport checkTagInGroup from \"../utils/check-tag-in-group\";\nimport isTextElement from \"../utils/is-text-element\";\n\nfunction useAddSkelton(config: SkeletonConfig) {\n  const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;\n  const CLASS_NAME = `react-skeletonify ${className} `;\n  const style = createStyle(config);\n\n  const addSkeleton = (node: React.ReactNode): React.ReactNode => {\n    if (!React.isValidElement(node))\n      return createNodeWrapper(node as any, CLASS_NAME, style);\n\n    const element = node as React.ReactElement<any>;\n    const { children } = element.props;\n    const elementType = element.type;\n\n    if (typeof elementType === \"string\") {\n      if (exceptTags.includes(elementType)) {\n        return element;\n      }\n      const isRestrictedGroupTag = checkTagInGroup(\n        elementType,\n        exceptTagGroups\n      );\n\n      if (isRestrictedGroupTag) return element;\n    }\n\n    const hasChildren = React.Children.count(children) > 0;\n    const isValidChildren = typeof children !== \"string\";\n\n    if (typeof elementType === \"function\") {\n      const rendered = (elementType as any)(element.props);\n      return addSkeleton(rendered);\n    }\n\n    const isTextTag = isTextElement(elementType);\n\n    if (isTextTag) {\n      return createLeafNode(element, CLASS_NAME, {\n        ...style,\n        margin: textTagsMargin,\n      });\n    }\n\n    if (elementType === \"img\") {\n      return createNodeWrapper(element, CLASS_NAME, style);\n    }\n\n    if (hasChildren && isValidChildren) {\n      const childWithSkeletons = React.Children.map(children, addSkeleton);\n\n      return React.cloneElement(element, {\n        ...element.props,\n        children: childWithSkeletons,\n      } as typeof element.props);\n    }\n\n    return createLeafNode(element, CLASS_NAME, style);\n  };\n\n  return addSkeleton;\n}\n\nexport default useAddSkelton;\n","import React, { createElement, CSSProperties } from \"react\";\n\nexport default function createNodeWrapper(\n  node: React.ReactElement<any>,\n  className: string,\n  style: CSSProperties\n) {\n  if (!node) return null;\n\n  return createElement(\n    \"div\",\n    {\n      className: className + (node?.props?.className || \"\"),\n      style: {\n        ...style,\n        ...node?.props?.style,\n      },\n    },\n    node\n  );\n}\n","import React, { CSSProperties } from \"react\";\n\nexport default function createLeafNode(\n  node: React.ReactElement<any>,\n  className: string,\n  style: CSSProperties\n): React.ReactElement {\n  return React.cloneElement(node, {\n    ...node.props,\n    className: className + (node.props.className || \"\"),\n    style: {\n      ...style,\n      ...node.props.style,\n    },\n  } as typeof node.props);\n}\n","import { CSSProperties } from \"react\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\nconst getAnimation = (\n  animation: string,\n  animationSpeed: number,\n  background: string\n) => {\n  switch (animation) {\n    case \"animation-1\":\n      return {\n        animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,\n        background: background,\n        animationDelay: \"0.5s\",\n      };\n    case \"animation-2\":\n      return {\n        animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,\n        background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,\n        backgroundSize: \"200% 100%\",\n        backgroundPosition: \"100% 0\",\n      };\n    case \"animation-3\":\n      return {\n        animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,\n        backgroundColor: background,\n      };\n  }\n};\n\nexport default (config: SkeletonConfig) => {\n  const { animationSpeed, background, border, borderRadius, animation, style } =\n    config;\n\n  const skeletonAnimation: CSSProperties = {\n    ...getAnimation(animation, animationSpeed, background),\n    border,\n    borderRadius,\n    ...style,\n  };\n\n  return skeletonAnimation;\n};\n","// --- Text & Content ---\nexport const TEXT_TAGS = [\n  \"p\",\n  \"span\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"b\",\n  \"strong\",\n  \"i\",\n  \"em\",\n  \"u\",\n  \"mark\",\n  \"small\",\n  \"sup\",\n  \"sub\",\n  \"abbr\",\n  \"cite\",\n  \"q\",\n  \"blockquote\",\n  \"code\",\n  \"pre\",\n  \"samp\",\n  \"kbd\",\n  \"var\",\n  \"time\",\n  \"br\",\n  \"wbr\",\n];\n\n// --- Sectioning / Structure ---\nexport const STRUCTURE_TAGS = [\n  \"html\",\n  \"head\",\n  \"body\",\n  \"main\",\n  \"header\",\n  \"footer\",\n  \"nav\",\n  \"section\",\n  \"article\",\n  \"aside\",\n];\n\n// --- Metadata ---\nexport const METADATA_TAGS = [\"base\", \"link\", \"meta\", \"style\", \"title\"];\n\n// --- Lists ---\nexport const LIST_TAGS = [\"ul\", \"ol\", \"li\", \"dl\", \"dt\", \"dd\"];\n\n// --- Tables ---\nexport const TABLE_TAGS = [\n  \"table\",\n  \"caption\",\n  \"thead\",\n  \"tbody\",\n  \"tfoot\",\n  \"tr\",\n  \"th\",\n  \"td\",\n  \"col\",\n  \"colgroup\",\n];\n\n// --- Forms & Inputs ---\nexport const FORM_TAGS = [\n  \"form\",\n  \"input\",\n  \"textarea\",\n  \"button\",\n  \"label\",\n  \"select\",\n  \"option\",\n  \"optgroup\",\n  \"fieldset\",\n  \"legend\",\n  \"datalist\",\n  \"output\",\n  \"meter\",\n  \"progress\",\n];\n\n// --- Media ---\nexport const MEDIA_TAGS = [\n  \"img\",\n  \"audio\",\n  \"video\",\n  \"source\",\n  \"track\",\n  \"picture\",\n  \"iframe\",\n  \"embed\",\n  \"object\",\n  \"map\",\n  \"area\",\n  \"canvas\",\n];\n\n// --- Interactive ---\nexport const INTERACTIVE_TAGS = [\n  \"details\",\n  \"summary\",\n  \"dialog\",\n  \"script\",\n  \"noscript\",\n  \"template\",\n];\n\n// --- Other / Inline semantics ---\nexport const MISC_TAGS = [\"ins\", \"del\", \"s\", \"bdi\", \"bdo\", \"ruby\", \"rt\", \"rp\"];\n","import {\n  FORM_TAGS,\n  INTERACTIVE_TAGS,\n  LIST_TAGS,\n  MEDIA_TAGS,\n  METADATA_TAGS,\n  MISC_TAGS,\n  STRUCTURE_TAGS,\n  TABLE_TAGS,\n  TEXT_TAGS,\n} from \"../constants/tags\";\nimport { HtmlTagGroup } from \"../context/skeleton-config\";\n\nexport default function checkTagInGroup(\n  tag: string,\n  groups: HtmlTagGroup[]\n): boolean {\n  return groups.some((group) => {\n    switch (group) {\n      case \"TEXT_TAGS\":\n        return TEXT_TAGS.includes(tag);\n      case \"STRUCTURE_TAGS\":\n        return STRUCTURE_TAGS.includes(tag);\n      case \"METADATA_TAGS\":\n        return METADATA_TAGS.includes(tag);\n      case \"LIST_TAGS\":\n        return LIST_TAGS.includes(tag);\n      case \"TABLE_TAGS\":\n        return TABLE_TAGS.includes(tag);\n      case \"FORM_TAGS\":\n        return FORM_TAGS.includes(tag);\n      case \"MEDIA_TAGS\":\n        return MEDIA_TAGS.includes(tag);\n      case \"INTERACTIVE_TAGS\":\n        return INTERACTIVE_TAGS.includes(tag);\n      case \"MISC_TAGS\":\n        return MISC_TAGS.includes(tag);\n    }\n  });\n}\n","import { LIST_TAGS, TEXT_TAGS } from \"../constants/tags\";\n\nexport default (elementType: string) => {\n  return TEXT_TAGS.includes(elementType) || LIST_TAGS.includes(elementType);\n};\n","import React, {\n  createContext,\n  CSSProperties,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  SkeletonConfig,\n  defaultBackground,\n  defaultValues,\n} from \"./skeleton-config\";\n\nconst SkeletonContext = createContext<SkeletonConfig>(defaultValues);\ninterface SkeletonProviderProps {\n  children: React.ReactNode;\n  config?: Partial<SkeletonConfig>;\n  style?: CSSProperties;\n}\n\nexport const SkeletonProvider: React.FC<SkeletonProviderProps> = (props) => {\n  const { children, config, style } = props;\n  const { animation = defaultValues.animation, background } = config || {};\n\n  const value: SkeletonConfig = useMemo(\n    () => ({\n      ...defaultValues,\n      ...config,\n      background: background ? background : defaultBackground[animation],\n      style: { ...defaultValues.style, ...config?.style, ...style },\n    }),\n    [animation, background, config, style]\n  );\n\n  return (\n    <SkeletonContext.Provider value={value}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const useSkeleton = () => useContext(SkeletonContext);\n","import { CSSProperties } from \"react\";\n\nexport const HTML_TAG_GROUPS = [\n  \"TEXT_TAGS\",\n  \"STRUCTURE_TAGS\",\n  \"METADATA_TAGS\",\n  \"LIST_TAGS\",\n  \"TABLE_TAGS\",\n  \"FORM_TAGS\",\n  \"MEDIA_TAGS\",\n  \"INTERACTIVE_TAGS\",\n  \"MISC_TAGS\",\n] as const;\n\nexport type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];\n\nexport const defaultBackground = {\n  \"animation-1\": \"#aeaeae\",\n  \"animation-2\": \"#e5e5e5\",\n  \"animation-3\": \"hsl(210, 20%, 90%)\",\n};\n\nexport type SkeletonConfig = {\n  animationSpeed: number;\n  background: string;\n  border: string;\n  borderRadius: string | number;\n  textTagsMargin: string;\n  className?: string;\n  style?: CSSProperties;\n  animation: \"animation-1\" | \"animation-2\";\n  exceptTags: string[];\n  exceptTagGroups: HtmlTagGroup[];\n};\n\nexport const defaultValues: SkeletonConfig = {\n  animationSpeed: 3,\n  background: \"#aeaeae\",\n  border: \"none\",\n  borderRadius: \"0\",\n  textTagsMargin: \"0\",\n  className: \"\",\n  style: {},\n  animation: \"animation-1\",\n  exceptTags: [],\n  exceptTagGroups: [],\n};\n"],"mappings":"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","names":["import_react","import_react","import_react","import_react","React","React","React","import_react","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,3 +1,6 @@
+// src/components/SkeletonWrapper.tsx
+import { useMemo as useMemo2 } from "react";
+
 // src/components/SkeletonElement.tsx
 import React4 from "react";
 
@@ -6,18 +9,69 @@ import React3 from "react";
 
 // src/utils/create-node-wrapper.ts
 import { createElement } from "react";
-function createNodeWrapper(node) {
-  var _a;
+function createNodeWrapper(node, className, style) {
+  var _a, _b;
   if (!node) return null;
   return createElement(
     "div",
     {
-      className: (((_a = node == null ? void 0 : node.props) == null ? void 0 : _a.className) || "") + " Rss-skeleton"
+      className: className + (((_a = node == null ? void 0 : node.props) == null ? void 0 : _a.className) || ""),
+      style: {
+        ...style,
+        ...(_b = node == null ? void 0 : node.props) == null ? void 0 : _b.style
+      }
     },
     node
   );
 }
 
+// src/utils/create-leaf-node.ts
+import React2 from "react";
+function createLeafNode(node, className, style) {
+  return React2.cloneElement(node, {
+    ...node.props,
+    className: className + (node.props.className || ""),
+    style: {
+      ...style,
+      ...node.props.style
+    }
+  });
+}
+
+// src/utils/create-style.ts
+var getAnimation = (animation, animationSpeed, background) => {
+  switch (animation) {
+    case "animation-1":
+      return {
+        animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,
+        background,
+        animationDelay: "0.5s"
+      };
+    case "animation-2":
+      return {
+        animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,
+        background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,
+        backgroundSize: "200% 100%",
+        backgroundPosition: "100% 0"
+      };
+    case "animation-3":
+      return {
+        animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,
+        backgroundColor: background
+      };
+  }
+};
+var create_style_default = (config) => {
+  const { animationSpeed, background, border, borderRadius, animation, style } = config;
+  const skeletonAnimation = {
+    ...getAnimation(animation, animationSpeed, background),
+    border,
+    borderRadius,
+    ...style
+  };
+  return skeletonAnimation;
+};
+
 // src/constants/tags.ts
 var TEXT_TAGS = [
   "p",
@@ -28,36 +82,161 @@ var TEXT_TAGS = [
   "h4",
   "h5",
   "h6",
-  "li"
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "mark",
+  "small",
+  "sup",
+  "sub",
+  "abbr",
+  "cite",
+  "q",
+  "blockquote",
+  "code",
+  "pre",
+  "samp",
+  "kbd",
+  "var",
+  "time",
+  "br",
+  "wbr"
+];
+var STRUCTURE_TAGS = [
+  "html",
+  "head",
+  "body",
+  "main",
+  "header",
+  "footer",
+  "nav",
+  "section",
+  "article",
+  "aside"
+];
+var METADATA_TAGS = ["base", "link", "meta", "style", "title"];
+var LIST_TAGS = ["ul", "ol", "li", "dl", "dt", "dd"];
+var TABLE_TAGS = [
+  "table",
+  "caption",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "col",
+  "colgroup"
+];
+var FORM_TAGS = [
+  "form",
+  "input",
+  "textarea",
+  "button",
+  "label",
+  "select",
+  "option",
+  "optgroup",
+  "fieldset",
+  "legend",
+  "datalist",
+  "output",
+  "meter",
+  "progress"
+];
+var MEDIA_TAGS = [
+  "img",
+  "audio",
+  "video",
+  "source",
+  "track",
+  "picture",
+  "iframe",
+  "embed",
+  "object",
+  "map",
+  "area",
+  "canvas"
+];
+var INTERACTIVE_TAGS = [
+  "details",
+  "summary",
+  "dialog",
+  "script",
+  "noscript",
+  "template"
 ];
+var MISC_TAGS = ["ins", "del", "s", "bdi", "bdo", "ruby", "rt", "rp"];
 
-// src/utils/create-leaf-node.ts
-import React2 from "react";
-function createLeafNode(node, className = "") {
-  return React2.cloneElement(node, {
-    ...node.props,
-    className: (node.props.className || "") + " Rss-skeleton " + className
+// src/utils/check-tag-in-group.ts
+function checkTagInGroup(tag, groups) {
+  return groups.some((group) => {
+    switch (group) {
+      case "TEXT_TAGS":
+        return TEXT_TAGS.includes(tag);
+      case "STRUCTURE_TAGS":
+        return STRUCTURE_TAGS.includes(tag);
+      case "METADATA_TAGS":
+        return METADATA_TAGS.includes(tag);
+      case "LIST_TAGS":
+        return LIST_TAGS.includes(tag);
+      case "TABLE_TAGS":
+        return TABLE_TAGS.includes(tag);
+      case "FORM_TAGS":
+        return FORM_TAGS.includes(tag);
+      case "MEDIA_TAGS":
+        return MEDIA_TAGS.includes(tag);
+      case "INTERACTIVE_TAGS":
+        return INTERACTIVE_TAGS.includes(tag);
+      case "MISC_TAGS":
+        return MISC_TAGS.includes(tag);
+    }
   });
 }
 
+// src/utils/is-text-element.ts
+var is_text_element_default = (elementType) => {
+  return TEXT_TAGS.includes(elementType) || LIST_TAGS.includes(elementType);
+};
+
 // src/hooks/useAddSkelton.ts
-function useAddSkelton() {
+function useAddSkelton(config) {
+  const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;
+  const CLASS_NAME = `react-skeletonify ${className} `;
+  const style = create_style_default(config);
   const addSkeleton = (node) => {
-    if (!React3.isValidElement(node)) return createNodeWrapper(node);
+    if (!React3.isValidElement(node))
+      return createNodeWrapper(node, CLASS_NAME, style);
     const element = node;
     const { children } = element.props;
     const elementType = element.type;
+    if (typeof elementType === "string") {
+      if (exceptTags.includes(elementType)) {
+        return element;
+      }
+      const isRestrictedGroupTag = checkTagInGroup(
+        elementType,
+        exceptTagGroups
+      );
+      if (isRestrictedGroupTag) return element;
+    }
     const hasChildren = React3.Children.count(children) > 0;
     const isValidChildren = typeof children !== "string";
     if (typeof elementType === "function") {
       const rendered = elementType(element.props);
       return addSkeleton(rendered);
     }
-    if (TEXT_TAGS.includes(elementType)) {
-      return createLeafNode(node, "Rss-skeleton-text");
+    const isTextTag = is_text_element_default(elementType);
+    if (isTextTag) {
+      return createLeafNode(element, CLASS_NAME, {
+        ...style,
+        margin: textTagsMargin
+      });
     }
     if (elementType === "img") {
-      return createNodeWrapper(element);
+      return createNodeWrapper(element, CLASS_NAME, style);
     }
     if (hasChildren && isValidChildren) {
       const childWithSkeletons = React3.Children.map(children, addSkeleton);
@@ -66,35 +245,87 @@ function useAddSkelton() {
         children: childWithSkeletons
       });
     }
-    return createLeafNode(element);
+    return createLeafNode(element, CLASS_NAME, style);
   };
   return addSkeleton;
 }
 var useAddSkelton_default = useAddSkelton;
 
 // src/components/SkeletonElement.tsx
-import { jsx } from "react/jsx-runtime";
-var SkeletonElement = ({
-  children
-}) => {
-  const addSkeleton = useAddSkelton_default();
-  return /* @__PURE__ */ jsx("div", { className: "skeleton-container", children: React4.Children.map(children, (child) => addSkeleton(child)) });
+var SkeletonElement = (props) => {
+  const { children, config } = props;
+  const addSkeleton = useAddSkelton_default(config);
+  return React4.Children.map(children, (child) => addSkeleton(child));
 };
 var SkeletonElement_default = SkeletonElement;
 
+// src/context/SkeletonContext.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+
+// src/context/skeleton-config.ts
+var defaultBackground = {
+  "animation-1": "#aeaeae",
+  "animation-2": "#e5e5e5",
+  "animation-3": "hsl(210, 20%, 90%)"
+};
+var defaultValues = {
+  animationSpeed: 3,
+  background: "#aeaeae",
+  border: "none",
+  borderRadius: "0",
+  textTagsMargin: "0",
+  className: "",
+  style: {},
+  animation: "animation-1",
+  exceptTags: [],
+  exceptTagGroups: []
+};
+
+// src/context/SkeletonContext.tsx
+import { jsx } from "react/jsx-runtime";
+var SkeletonContext = createContext(defaultValues);
+var SkeletonProvider = (props) => {
+  const { children, config, style } = props;
+  const { animation = defaultValues.animation, background } = config || {};
+  const value = useMemo(
+    () => ({
+      ...defaultValues,
+      ...config,
+      background: background ? background : defaultBackground[animation],
+      style: { ...defaultValues.style, ...config == null ? void 0 : config.style, ...style }
+    }),
+    [animation, background, config, style]
+  );
+  return /* @__PURE__ */ jsx(SkeletonContext.Provider, { value, children });
+};
+var useSkeleton = () => useContext(SkeletonContext);
+
 // src/components/SkeletonWrapper.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-var SkeletonWrapper = ({
-  loading,
-  children
-}) => {
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SkeletonWrapper = (props) => {
+  const { loading, children, overrideConfig, style } = props;
+  const mainConfig = useSkeleton();
+  const config = useMemo2(
+    () => ({
+      ...mainConfig,
+      ...overrideConfig,
+      style: { ...mainConfig.style, ...overrideConfig == null ? void 0 : overrideConfig.style, ...style }
+    }),
+    [overrideConfig, mainConfig]
+  );
   if (loading) {
-    return /* @__PURE__ */ jsx2(SkeletonElement_default, { children });
+    return /* @__PURE__ */ jsx2(SkeletonElement_default, { config, children });
   }
-  return /* @__PURE__ */ jsx2(Fragment, { children });
+  return children;
 };
 var SkeletonWrapper_default = SkeletonWrapper;
 export {
-  SkeletonWrapper_default as SkeletonWrapper
+  SkeletonProvider,
+  SkeletonWrapper_default as SkeletonWrapper,
+  useSkeleton
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/constants/tags.ts","../src/utils/create-leaf-node.ts","../src/components/SkeletonWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport useAddSkelton from \"../hooks/useAddSkelton\";\n\nconst SkeletonElement: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  const addSkeleton = useAddSkelton();\n  return (\n    <div className=\"skeleton-container\">\n      {React.Children.map(children, (child) => addSkeleton(child))}\n    </div>\n  );\n};\n\nexport default SkeletonElement;\n","import React from \"react\";\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\nimport { TEXT_TAGS } from \"../constants/tags\";\nimport createLeafNode from \"../utils/create-leaf-node\";\n\nfunction useAddSkelton() {\n  const addSkeleton = (node: React.ReactNode): React.ReactNode => {\n    if (!React.isValidElement(node)) return createNodeWrapper(node as any);\n\n    const element = node as React.ReactElement<any>;\n    const { children } = element.props;\n    const elementType = element.type;\n\n    const hasChildren = React.Children.count(children) > 0;\n    const isValidChildren = typeof children !== \"string\";\n\n    if (typeof elementType === \"function\") {\n      const rendered = (elementType as any)(element.props);\n      return addSkeleton(rendered);\n    }\n\n    if (TEXT_TAGS.includes(elementType)) {\n      return createLeafNode(node, \"Rss-skeleton-text\");\n    }\n\n    if (elementType === \"img\") {\n      return createNodeWrapper(element);\n    }\n\n    if (hasChildren && isValidChildren) {\n      const childWithSkeletons = React.Children.map(children, addSkeleton);\n\n      return React.cloneElement(element, {\n        ...element.props,\n        children: childWithSkeletons,\n      } as typeof element.props);\n    }\n\n    return createLeafNode(element);\n  };\n\n  return addSkeleton;\n}\n\nexport default useAddSkelton;\n","import React, { createElement } from \"react\";\n\nexport default function createNodeWrapper(node: React.ReactElement<any>) {\n  if (!node) return null;\n\n  return createElement(\n    \"div\",\n    {\n      className: (node?.props?.className || \"\") + \" Rss-skeleton\",\n    },\n    node\n  );\n}\n","export const TEXT_TAGS = [\n  \"p\",\n  \"span\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"li\",\n];\n","import React from \"react\";\n\nexport default function createLeafNode(\n  node: React.ReactElement<any>,\n  className: string = \"\"\n): React.ReactElement {\n  return React.cloneElement(node, {\n    ...node.props,\n    className: (node.props.className || \"\") + \" Rss-skeleton \" + className,\n  } as typeof node.props);\n}\n","import React from \"react\";\nimport SkeletonElement from \"./SkeletonElement\";\n\ninterface SkeletonWrapperProps {\n  loading: boolean;\n  children: React.ReactNode;\n}\n\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = ({\n  loading,\n  children,\n}) => {\n  if (loading) {\n    return <SkeletonElement>{children}</SkeletonElement>;\n  }\n  return <>{children}</>;\n};\n\nexport default SkeletonWrapper;\n"],"mappings":";AAAA,OAAOA,YAAW;;;ACAlB,OAAOC,YAAW;;;ACAlB,SAAgB,qBAAqB;AAEtB,SAAR,kBAAmC,MAA+B;AAFzE;AAGE,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,cAAY,kCAAM,UAAN,mBAAa,cAAa,MAAM;AAAA,IAC9C;AAAA,IACA;AAAA,EACF;AACF;;;ACZO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACVA,OAAOC,YAAW;AAEH,SAAR,eACL,MACA,YAAoB,IACA;AACpB,SAAOA,OAAM,aAAa,MAAM;AAAA,IAC9B,GAAG,KAAK;AAAA,IACR,YAAY,KAAK,MAAM,aAAa,MAAM,mBAAmB;AAAA,EAC/D,CAAsB;AACxB;;;AHLA,SAAS,gBAAgB;AACvB,QAAM,cAAc,CAAC,SAA2C;AAC9D,QAAI,CAACC,OAAM,eAAe,IAAI,EAAG,QAAO,kBAAkB,IAAW;AAErE,UAAM,UAAU;AAChB,UAAM,EAAE,SAAS,IAAI,QAAQ;AAC7B,UAAM,cAAc,QAAQ;AAE5B,UAAM,cAAcA,OAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,kBAAkB,OAAO,aAAa;AAE5C,QAAI,OAAO,gBAAgB,YAAY;AACrC,YAAM,WAAY,YAAoB,QAAQ,KAAK;AACnD,aAAO,YAAY,QAAQ;AAAA,IAC7B;AAEA,QAAI,UAAU,SAAS,WAAW,GAAG;AACnC,aAAO,eAAe,MAAM,mBAAmB;AAAA,IACjD;AAEA,QAAI,gBAAgB,OAAO;AACzB,aAAO,kBAAkB,OAAO;AAAA,IAClC;AAEA,QAAI,eAAe,iBAAiB;AAClC,YAAM,qBAAqBA,OAAM,SAAS,IAAI,UAAU,WAAW;AAEnE,aAAOA,OAAM,aAAa,SAAS;AAAA,QACjC,GAAG,QAAQ;AAAA,QACX,UAAU;AAAA,MACZ,CAAyB;AAAA,IAC3B;AAEA,WAAO,eAAe,OAAO;AAAA,EAC/B;AAEA,SAAO;AACT;AAEA,IAAO,wBAAQ;;;ADpCX;AALJ,IAAM,kBAA2D,CAAC;AAAA,EAChE;AACF,MAAM;AACJ,QAAM,cAAc,sBAAc;AAClC,SACE,oBAAC,SAAI,WAAU,sBACZ,UAAAC,OAAM,SAAS,IAAI,UAAU,CAAC,UAAU,YAAY,KAAK,CAAC,GAC7D;AAEJ;AAEA,IAAO,0BAAQ;;;AKDJ,SAEF,UAFE,OAAAC,YAAA;AALX,IAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AACF,MAAM;AACJ,MAAI,SAAS;AACX,WAAO,gBAAAA,KAAC,2BAAiB,UAAS;AAAA,EACpC;AACA,SAAO,gBAAAA,KAAA,YAAG,UAAS;AACrB;AAEA,IAAO,0BAAQ;","names":["React","React","React","React","React","jsx"]}
+{"version":3,"sources":["../src/components/SkeletonWrapper.tsx","../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/utils/create-leaf-node.ts","../src/utils/create-style.ts","../src/constants/tags.ts","../src/utils/check-tag-in-group.ts","../src/utils/is-text-element.ts","../src/context/SkeletonContext.tsx","../src/context/skeleton-config.ts"],"sourcesContent":["import React, { CSSProperties, useMemo } from \"react\";\nimport SkeletonElement from \"./SkeletonElement\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport { useSkeleton } from \"../context/SkeletonContext\";\n\ninterface SkeletonWrapperProps {\n  loading: boolean;\n  children: React.ReactNode;\n  overrideConfig?: Partial<SkeletonConfig>;\n  style?: CSSProperties;\n}\n\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = (props) => {\n  const { loading, children, overrideConfig, style } = props;\n  const mainConfig = useSkeleton();\n\n  const config: SkeletonConfig = useMemo(\n    () => ({\n      ...mainConfig,\n      ...overrideConfig,\n      style: { ...mainConfig.style, ...overrideConfig?.style, ...style },\n    }),\n    [overrideConfig, mainConfig]\n  );\n\n  if (loading) {\n    return <SkeletonElement config={config}>{children}</SkeletonElement>;\n  }\n  return children;\n};\n\nexport default SkeletonWrapper;\n","import React from \"react\";\nimport useAddSkelton from \"../hooks/useAddSkelton\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\ninterface SkeletonElementProps {\n  children: React.ReactNode;\n  config: SkeletonConfig;\n}\n\nconst SkeletonElement: React.FC<SkeletonElementProps> = (props) => {\n  const { children, config } = props;\n  const addSkeleton = useAddSkelton(config);\n\n  return React.Children.map(children, (child) => addSkeleton(child));\n};\n\nexport default SkeletonElement;\n","import React from \"react\";\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\nimport createLeafNode from \"../utils/create-leaf-node\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport createStyle from \"../utils/create-style\";\nimport checkTagInGroup from \"../utils/check-tag-in-group\";\nimport isTextElement from \"../utils/is-text-element\";\n\nfunction useAddSkelton(config: SkeletonConfig) {\n  const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;\n  const CLASS_NAME = `react-skeletonify ${className} `;\n  const style = createStyle(config);\n\n  const addSkeleton = (node: React.ReactNode): React.ReactNode => {\n    if (!React.isValidElement(node))\n      return createNodeWrapper(node as any, CLASS_NAME, style);\n\n    const element = node as React.ReactElement<any>;\n    const { children } = element.props;\n    const elementType = element.type;\n\n    if (typeof elementType === \"string\") {\n      if (exceptTags.includes(elementType)) {\n        return element;\n      }\n      const isRestrictedGroupTag = checkTagInGroup(\n        elementType,\n        exceptTagGroups\n      );\n\n      if (isRestrictedGroupTag) return element;\n    }\n\n    const hasChildren = React.Children.count(children) > 0;\n    const isValidChildren = typeof children !== \"string\";\n\n    if (typeof elementType === \"function\") {\n      const rendered = (elementType as any)(element.props);\n      return addSkeleton(rendered);\n    }\n\n    const isTextTag = isTextElement(elementType);\n\n    if (isTextTag) {\n      return createLeafNode(element, CLASS_NAME, {\n        ...style,\n        margin: textTagsMargin,\n      });\n    }\n\n    if (elementType === \"img\") {\n      return createNodeWrapper(element, CLASS_NAME, style);\n    }\n\n    if (hasChildren && isValidChildren) {\n      const childWithSkeletons = React.Children.map(children, addSkeleton);\n\n      return React.cloneElement(element, {\n        ...element.props,\n        children: childWithSkeletons,\n      } as typeof element.props);\n    }\n\n    return createLeafNode(element, CLASS_NAME, style);\n  };\n\n  return addSkeleton;\n}\n\nexport default useAddSkelton;\n","import React, { createElement, CSSProperties } from \"react\";\n\nexport default function createNodeWrapper(\n  node: React.ReactElement<any>,\n  className: string,\n  style: CSSProperties\n) {\n  if (!node) return null;\n\n  return createElement(\n    \"div\",\n    {\n      className: className + (node?.props?.className || \"\"),\n      style: {\n        ...style,\n        ...node?.props?.style,\n      },\n    },\n    node\n  );\n}\n","import React, { CSSProperties } from \"react\";\n\nexport default function createLeafNode(\n  node: React.ReactElement<any>,\n  className: string,\n  style: CSSProperties\n): React.ReactElement {\n  return React.cloneElement(node, {\n    ...node.props,\n    className: className + (node.props.className || \"\"),\n    style: {\n      ...style,\n      ...node.props.style,\n    },\n  } as typeof node.props);\n}\n","import { CSSProperties } from \"react\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\nconst getAnimation = (\n  animation: string,\n  animationSpeed: number,\n  background: string\n) => {\n  switch (animation) {\n    case \"animation-1\":\n      return {\n        animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,\n        background: background,\n        animationDelay: \"0.5s\",\n      };\n    case \"animation-2\":\n      return {\n        animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,\n        background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,\n        backgroundSize: \"200% 100%\",\n        backgroundPosition: \"100% 0\",\n      };\n    case \"animation-3\":\n      return {\n        animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,\n        backgroundColor: background,\n      };\n  }\n};\n\nexport default (config: SkeletonConfig) => {\n  const { animationSpeed, background, border, borderRadius, animation, style } =\n    config;\n\n  const skeletonAnimation: CSSProperties = {\n    ...getAnimation(animation, animationSpeed, background),\n    border,\n    borderRadius,\n    ...style,\n  };\n\n  return skeletonAnimation;\n};\n","// --- Text & Content ---\nexport const TEXT_TAGS = [\n  \"p\",\n  \"span\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"b\",\n  \"strong\",\n  \"i\",\n  \"em\",\n  \"u\",\n  \"mark\",\n  \"small\",\n  \"sup\",\n  \"sub\",\n  \"abbr\",\n  \"cite\",\n  \"q\",\n  \"blockquote\",\n  \"code\",\n  \"pre\",\n  \"samp\",\n  \"kbd\",\n  \"var\",\n  \"time\",\n  \"br\",\n  \"wbr\",\n];\n\n// --- Sectioning / Structure ---\nexport const STRUCTURE_TAGS = [\n  \"html\",\n  \"head\",\n  \"body\",\n  \"main\",\n  \"header\",\n  \"footer\",\n  \"nav\",\n  \"section\",\n  \"article\",\n  \"aside\",\n];\n\n// --- Metadata ---\nexport const METADATA_TAGS = [\"base\", \"link\", \"meta\", \"style\", \"title\"];\n\n// --- Lists ---\nexport const LIST_TAGS = [\"ul\", \"ol\", \"li\", \"dl\", \"dt\", \"dd\"];\n\n// --- Tables ---\nexport const TABLE_TAGS = [\n  \"table\",\n  \"caption\",\n  \"thead\",\n  \"tbody\",\n  \"tfoot\",\n  \"tr\",\n  \"th\",\n  \"td\",\n  \"col\",\n  \"colgroup\",\n];\n\n// --- Forms & Inputs ---\nexport const FORM_TAGS = [\n  \"form\",\n  \"input\",\n  \"textarea\",\n  \"button\",\n  \"label\",\n  \"select\",\n  \"option\",\n  \"optgroup\",\n  \"fieldset\",\n  \"legend\",\n  \"datalist\",\n  \"output\",\n  \"meter\",\n  \"progress\",\n];\n\n// --- Media ---\nexport const MEDIA_TAGS = [\n  \"img\",\n  \"audio\",\n  \"video\",\n  \"source\",\n  \"track\",\n  \"picture\",\n  \"iframe\",\n  \"embed\",\n  \"object\",\n  \"map\",\n  \"area\",\n  \"canvas\",\n];\n\n// --- Interactive ---\nexport const INTERACTIVE_TAGS = [\n  \"details\",\n  \"summary\",\n  \"dialog\",\n  \"script\",\n  \"noscript\",\n  \"template\",\n];\n\n// --- Other / Inline semantics ---\nexport const MISC_TAGS = [\"ins\", \"del\", \"s\", \"bdi\", \"bdo\", \"ruby\", \"rt\", \"rp\"];\n","import {\n  FORM_TAGS,\n  INTERACTIVE_TAGS,\n  LIST_TAGS,\n  MEDIA_TAGS,\n  METADATA_TAGS,\n  MISC_TAGS,\n  STRUCTURE_TAGS,\n  TABLE_TAGS,\n  TEXT_TAGS,\n} from \"../constants/tags\";\nimport { HtmlTagGroup } from \"../context/skeleton-config\";\n\nexport default function checkTagInGroup(\n  tag: string,\n  groups: HtmlTagGroup[]\n): boolean {\n  return groups.some((group) => {\n    switch (group) {\n      case \"TEXT_TAGS\":\n        return TEXT_TAGS.includes(tag);\n      case \"STRUCTURE_TAGS\":\n        return STRUCTURE_TAGS.includes(tag);\n      case \"METADATA_TAGS\":\n        return METADATA_TAGS.includes(tag);\n      case \"LIST_TAGS\":\n        return LIST_TAGS.includes(tag);\n      case \"TABLE_TAGS\":\n        return TABLE_TAGS.includes(tag);\n      case \"FORM_TAGS\":\n        return FORM_TAGS.includes(tag);\n      case \"MEDIA_TAGS\":\n        return MEDIA_TAGS.includes(tag);\n      case \"INTERACTIVE_TAGS\":\n        return INTERACTIVE_TAGS.includes(tag);\n      case \"MISC_TAGS\":\n        return MISC_TAGS.includes(tag);\n    }\n  });\n}\n","import { LIST_TAGS, TEXT_TAGS } from \"../constants/tags\";\n\nexport default (elementType: string) => {\n  return TEXT_TAGS.includes(elementType) || LIST_TAGS.includes(elementType);\n};\n","import React, {\n  createContext,\n  CSSProperties,\n  useContext,\n  useMemo,\n} from \"react\";\nimport {\n  SkeletonConfig,\n  defaultBackground,\n  defaultValues,\n} from \"./skeleton-config\";\n\nconst SkeletonContext = createContext<SkeletonConfig>(defaultValues);\ninterface SkeletonProviderProps {\n  children: React.ReactNode;\n  config?: Partial<SkeletonConfig>;\n  style?: CSSProperties;\n}\n\nexport const SkeletonProvider: React.FC<SkeletonProviderProps> = (props) => {\n  const { children, config, style } = props;\n  const { animation = defaultValues.animation, background } = config || {};\n\n  const value: SkeletonConfig = useMemo(\n    () => ({\n      ...defaultValues,\n      ...config,\n      background: background ? background : defaultBackground[animation],\n      style: { ...defaultValues.style, ...config?.style, ...style },\n    }),\n    [animation, background, config, style]\n  );\n\n  return (\n    <SkeletonContext.Provider value={value}>\n      {children}\n    </SkeletonContext.Provider>\n  );\n};\n\nexport const useSkeleton = () => useContext(SkeletonContext);\n","import { CSSProperties } from \"react\";\n\nexport const HTML_TAG_GROUPS = [\n  \"TEXT_TAGS\",\n  \"STRUCTURE_TAGS\",\n  \"METADATA_TAGS\",\n  \"LIST_TAGS\",\n  \"TABLE_TAGS\",\n  \"FORM_TAGS\",\n  \"MEDIA_TAGS\",\n  \"INTERACTIVE_TAGS\",\n  \"MISC_TAGS\",\n] as const;\n\nexport type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];\n\nexport const defaultBackground = {\n  \"animation-1\": \"#aeaeae\",\n  \"animation-2\": \"#e5e5e5\",\n  \"animation-3\": \"hsl(210, 20%, 90%)\",\n};\n\nexport type SkeletonConfig = {\n  animationSpeed: number;\n  background: string;\n  border: string;\n  borderRadius: string | number;\n  textTagsMargin: string;\n  className?: string;\n  style?: CSSProperties;\n  animation: \"animation-1\" | \"animation-2\";\n  exceptTags: string[];\n  exceptTagGroups: HtmlTagGroup[];\n};\n\nexport const defaultValues: SkeletonConfig = {\n  animationSpeed: 3,\n  background: \"#aeaeae\",\n  border: \"none\",\n  borderRadius: \"0\",\n  textTagsMargin: \"0\",\n  className: \"\",\n  style: {},\n  animation: \"animation-1\",\n  exceptTags: [],\n  exceptTagGroups: [],\n};\n"],"mappings":"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","names":["useMemo","React","React","React","React","React","jsx","useMemo"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-skeletonify",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",