react-skeletonify 1.1.0 → 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 (6) hide show
  1. package/README.md +22 -5
  2. package/dist/index.d.mts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -1,8 +1,20 @@
1
- [![npm version](https://img.shields.io/npm/v/react-skeletonify.svg)](https://www.npmjs.com/package/react-skeletonify)
2
- [![npm downloads](https://img.shields.io/npm/dm/react-skeletonify.svg)](https://www.npmjs.com/package/react-skeletonify)
3
- [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
4
-
5
- # ⚡ React Skeletonify
1
+ <p align="center">
2
+ <img src="https://raw.githubusercontent.com/Sinan0333/react-smart-skeleton/main/assets/logo.png" alt="React Skeletonify Logo" width="120" height="110" />
3
+ </p>
4
+
5
+ <p align="center">
6
+ <a href="https://www.npmjs.com/package/react-skeletonify">
7
+ <img src="https://img.shields.io/npm/v/react-skeletonify.svg" alt="npm version" />
8
+ </a>
9
+ <a href="https://www.npmjs.com/package/react-skeletonify">
10
+ <img src="https://img.shields.io/npm/dm/react-skeletonify.svg" alt="npm downloads" />
11
+ </a>
12
+ <a href="https://github.com/prettier/prettier">
13
+ <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier" />
14
+ </a>
15
+ </p>
16
+
17
+ <h1 align="center">⚡ React Skeletonify</h1>
6
18
 
7
19
  A **lightweight and flexible skeleton loader** for React, built to make loading states feel smooth and natural.
8
20
  Unlike traditional static skeletons, **React Skeletonify** adapts to your components dynamically — letting you configure animations, styles, and exclusions globally or per-component.
@@ -11,6 +23,11 @@ Unlike traditional static skeletons, **React Skeletonify** adapts to your compon
11
23
 
12
24
  👉 [Try it here](https://playcode.io/2556254)
13
25
 
26
+ ## 📚 Documentation
27
+
28
+ For complete guides and examples check out the full documentation site:
29
+ 👉 [React Skeletonify Documentation](https://react-skeletonify.sinan-dev.in)
30
+
14
31
  ## ✨ Features
15
32
 
16
33
  - 🎨 **Global & local configuration** with `SkeletonProvider` and `SkeletonWrapper`
package/dist/index.d.mts CHANGED
@@ -6,7 +6,7 @@ type SkeletonConfig = {
6
6
  animationSpeed: number;
7
7
  background: string;
8
8
  border: string;
9
- borderRadius: string | number;
9
+ borderRadius: string;
10
10
  textTagsMargin: string;
11
11
  className?: string;
12
12
  style?: CSSProperties;
package/dist/index.d.ts CHANGED
@@ -6,7 +6,7 @@ type SkeletonConfig = {
6
6
  animationSpeed: number;
7
7
  background: string;
8
8
  border: string;
9
- borderRadius: string | number;
9
+ borderRadius: string;
10
10
  textTagsMargin: string;
11
11
  className?: string;
12
12
  style?: CSSProperties;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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 | 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA8C;;;ACA9C,IAAAC,gBAAkB;;;ACAlB,IAAAC,gBAAkB;;;ACAlB,mBAAoD;AAErC,SAAR,kBACL,MACA,WACA,OACA;AANF;AAOE,MAAI,CAAC,KAAM,QAAO;AAElB,aAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,WAAW,eAAa,kCAAM,UAAN,mBAAa,cAAa;AAAA,MAClD,OAAO;AAAA,QACL,GAAG;AAAA,QACH,IAAG,kCAAM,UAAN,mBAAa;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;;ACpBA,IAAAC,gBAAqC;AAEtB,SAAR,eACL,MACA,WACA,OACoB;AACpB,SAAO,cAAAC,QAAM,aAAa,MAAM;AAAA,IAC9B,GAAG,KAAK;AAAA,IACR,WAAW,aAAa,KAAK,MAAM,aAAa;AAAA,IAChD,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,KAAK,MAAM;AAAA,IAChB;AAAA,EACF,CAAsB;AACxB;;;ACZA,IAAM,eAAe,CACnB,WACA,gBACA,eACG;AACH,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D,YAAY,2BAA2B,UAAU,mCAAmC,UAAU;AAAA,QAC9F,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D,iBAAiB;AAAA,MACnB;AAAA,EACJ;AACF;AAEA,IAAO,uBAAQ,CAAC,WAA2B;AACzC,QAAM,EAAE,gBAAgB,YAAY,QAAQ,cAAc,WAAW,MAAM,IACzE;AAEF,QAAM,oBAAmC;AAAA,IACvC,GAAG,aAAa,WAAW,gBAAgB,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AAEA,SAAO;AACT;;;ACzCO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,gBAAgB,CAAC,QAAQ,QAAQ,QAAQ,SAAS,OAAO;AAG/D,IAAM,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAGrD,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,YAAY,CAAC,OAAO,OAAO,KAAK,OAAO,OAAO,QAAQ,MAAM,IAAI;;;ACnG9D,SAAR,gBACL,KACA,QACS;AACT,SAAO,OAAO,KAAK,CAAC,UAAU;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,eAAe,SAAS,GAAG;AAAA,MACpC,KAAK;AACH,eAAO,cAAc,SAAS,GAAG;AAAA,MACnC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,WAAW,SAAS,GAAG;AAAA,MAChC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,WAAW,SAAS,GAAG;AAAA,MAChC,KAAK;AACH,eAAO,iBAAiB,SAAS,GAAG;AAAA,MACtC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,IACjC;AAAA,EACF,CAAC;AACH;;;ACrCA,IAAO,0BAAQ,CAAC,gBAAwB;AACtC,SAAO,UAAU,SAAS,WAAW,KAAK,UAAU,SAAS,WAAW;AAC1E;;;ANIA,SAAS,cAAc,QAAwB;AAC7C,QAAM,EAAE,WAAW,YAAY,iBAAiB,eAAe,IAAI;AACnE,QAAM,aAAa,qBAAqB,SAAS;AACjD,QAAM,QAAQ,qBAAY,MAAM;AAEhC,QAAM,cAAc,CAAC,SAA2C;AAC9D,QAAI,CAAC,cAAAC,QAAM,eAAe,IAAI;AAC5B,aAAO,kBAAkB,MAAa,YAAY,KAAK;AAEzD,UAAM,UAAU;AAChB,UAAM,EAAE,SAAS,IAAI,QAAQ;AAC7B,UAAM,cAAc,QAAQ;AAE5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,UAAI,WAAW,SAAS,WAAW,GAAG;AACpC,eAAO;AAAA,MACT;AACA,YAAM,uBAAuB;AAAA,QAC3B;AAAA,QACA;AAAA,MACF;AAEA,UAAI,qBAAsB,QAAO;AAAA,IACnC;AAEA,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,UAAM,YAAY,wBAAc,WAAW;AAE3C,QAAI,WAAW;AACb,aAAO,eAAe,SAAS,YAAY;AAAA,QACzC,GAAG;AAAA,QACH,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AAEA,QAAI,gBAAgB,OAAO;AACzB,aAAO,kBAAkB,SAAS,YAAY,KAAK;AAAA,IACrD;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,SAAS,YAAY,KAAK;AAAA,EAClD;AAEA,SAAO;AACT;AAEA,IAAO,wBAAQ;;;AD5Df,IAAM,kBAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,UAAU,OAAO,IAAI;AAC7B,QAAM,cAAc,sBAAc,MAAM;AAExC,SAAO,cAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,UAAU,YAAY,KAAK,CAAC;AACnE;AAEA,IAAO,0BAAQ;;;AQhBf,IAAAC,gBAKO;;;ACWA,IAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AACjB;AAeO,IAAM,gBAAgC;AAAA,EAC3C,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,EACX,YAAY,CAAC;AAAA,EACb,iBAAiB,CAAC;AACpB;;;ADZI;AAtBJ,IAAM,sBAAkB,6BAA8B,aAAa;AAO5D,IAAM,mBAAoD,CAAC,UAAU;AAC1E,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI;AACpC,QAAM,EAAE,YAAY,cAAc,WAAW,WAAW,IAAI,UAAU,CAAC;AAEvE,QAAM,YAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,YAAY,aAAa,aAAa,kBAAkB,SAAS;AAAA,MACjE,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,iCAAQ,OAAO,GAAG,MAAM;AAAA,IAC9D;AAAA,IACA,CAAC,WAAW,YAAY,QAAQ,KAAK;AAAA,EACvC;AAEA,SACE,4CAAC,gBAAgB,UAAhB,EAAyB,OACvB,UACH;AAEJ;AAEO,IAAM,cAAc,UAAM,0BAAW,eAAe;;;ATdhD,IAAAC,sBAAA;AAdX,IAAM,kBAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,SAAS,UAAU,gBAAgB,MAAM,IAAI;AACrD,QAAM,aAAa,YAAY;AAE/B,QAAM,aAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,iDAAgB,OAAO,GAAG,MAAM;AAAA,IACnE;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,EAC7B;AAEA,MAAI,SAAS;AACX,WAAO,6CAAC,2BAAgB,QAAiB,UAAS;AAAA,EACpD;AACA,SAAO;AACT;AAEA,IAAO,0BAAQ;","names":["import_react","import_react","import_react","import_react","React","React","React","import_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.map CHANGED
@@ -1 +1 @@
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 | 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"]}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-skeletonify",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",
@@ -30,7 +30,7 @@
30
30
  "type": "git",
31
31
  "url": "https://github.com/Sinan0333/react-skeletonify"
32
32
  },
33
- "homepage": "https://github.com/Sinan0333/react-skeletonify#readme",
33
+ "homepage": "https://react-skeletonify.sinan-dev.in",
34
34
  "bugs": {
35
35
  "url": "https://github.com/Sinan0333/react-skeletonify/issues"
36
36
  },