npm - react-skeletonify - Versions diffs - 1.0.2 → 1.1.1 - Mend

react-skeletonify 1.0.2 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -1,21 +1,41 @@
-[![npm version](https://img.shields.io/npm/v/react-skeletonify.svg)](https://www.npmjs.com/package/react-skeletonify)
-[![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 is a lightweight React skeleton loader component. Create beautiful loading placeholders for text, images, buttons, or cards with smooth animations.
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Sinan0333/react-smart-skeleton/main/assets/logo.png" alt="React Skeletonify Logo" width="120" height="110" />
+</p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-skeletonify">
+    <img src="https://img.shields.io/npm/v/react-skeletonify.svg" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-skeletonify">
+    <img src="https://img.shields.io/npm/dm/react-skeletonify.svg" alt="npm downloads" />
+  </a>
+  <a href="https://github.com/prettier/prettier">
+    <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier" />
+  </a>
+</p>
+<h1 align="center">⚡ React Skeletonify</h1>
+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
 👉 [Try it here](https://playcode.io/2556254)
+## 📚 Documentation
+For complete guides and examples check out the full documentation site:
+👉 [React Skeletonify Documentation](https://react-skeletonify.sinan-dev.in)
 ## ✨ 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 +45,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 +88,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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;
+    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 CHANGED Viewed

@@ -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;
+    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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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;\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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;\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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-skeletonify",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -30,7 +30,7 @@
     "type": "git",
     "url": "https://github.com/Sinan0333/react-skeletonify"
   },
-  "homepage": "https://github.com/Sinan0333/react-skeletonify#readme",
+  "homepage": "https://react-skeletonify.sinan-dev.in",
   "bugs": {
     "url": "https://github.com/Sinan0333/react-skeletonify/issues"
   },