Merge pull request #7 from julio-salas03/jcs/update-tag-prop-typing

update tag prop tying to exclude svg elements
julio-salas03 · Sep 4, 2024 · e934510 · e934510
2 parents db3dd2e + c65cd3e
commit e934510
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/docs/src/content/docs/api.mdx b/docs/src/content/docs/api.mdx
@@ -26,7 +26,7 @@ Wrap your text with this component. The text will automatically be wrapped, by d
 | **extraProps**    | An extra value that will be forwarded to each wrapper.                                                                                    | `T`                                 |
 | **children**      | The content to be split and rendered.                                                                                                     | `ReactNode`                         |
 | **debounceTime**  | The time the resize listener should be [debounced](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1) by. In milliseconds. | `number`                            |
-| **tag**           | The HTML tag as the container for the text.                                                                                               | `JSX.ElementType`                   |
+| **tag**           | The HTML tag as the container for the text.                                                                                               | `HTMLElementTag`                    |
 
 ### Example
 

diff --git a/src/components/SplitText.tsx b/src/components/SplitText.tsx
@@ -7,7 +7,7 @@ import {
   WordWrapperProps,
   LineWrapperProps,
 } from './Wrappers';
-import { debounce } from '../utils';
+import { debounce, HTMLElementTag } from '../utils';
 
 const DefaultLineWrapper = React.memo(LineWrapper);
 const DefaultWordWrapper = React.memo(WordWrapper);
@@ -62,14 +62,14 @@ export interface SplitTextProps<T = any> {
   /**
    * The HTML tag as the container for the text.
    * @default "span"
-   * @type JSX.ElementType
+   * @type HTMLElementTag
    */
-  tag?: JSX.ElementType;
+  tag?: HTMLElementTag;
 }
 
 const DEFAULT_CONTAINER_TAG = 'span';
 
-export const SplitText = React.forwardRef<unknown, SplitTextProps>(
+export const SplitText = React.forwardRef<HTMLElement, SplitTextProps>(
   function SplitText(
     {
       children,
@@ -86,7 +86,7 @@ export const SplitText = React.forwardRef<unknown, SplitTextProps>(
   ) {
     let text = '';
 
-    const Container = tag || DEFAULT_CONTAINER_TAG;
+    const Container = (tag || DEFAULT_CONTAINER_TAG) as JSX.ElementType;
 
     React.Children.map(children, child => {
       if (typeof child === 'string' || typeof child === 'number') {

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function debounce<T extends any[]>(
   func: (...args: T) => any,
   timeout: number
@@ -10,3 +12,12 @@ export function debounce<T extends any[]>(
     }, timeout);
   };
 }
+
+type KeysMatching<T extends object, V> = {
+  [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+
+export type HTMLElementTag = KeysMatching<
+  JSX.IntrinsicElements,
+  React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLElement>, HTMLElement>
+>;
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -49,7 +49,7 @@ describe('SplitText', () => {
     let checkStyles = () => {};
 
     const Component = () => {
-      const ref = React.useRef<HTMLElement>(null);
+      const ref = React.useRef<HTMLSpanElement>(null);
 
       checkStyles = () => {
         const el = ref.current;
@@ -72,7 +72,7 @@ describe('SplitText', () => {
     let checkStyles = () => {};
 
     const Component = () => {
-      const ref = React.useRef<HTMLElement>(null);
+      const ref = React.useRef<HTMLDivElement>(null);
 
       checkStyles = () => {
         const el = ref.current;