Skip to content

Commit

Permalink
update tag prop tying to exclude svg elements
Browse files Browse the repository at this point in the history
  • Loading branch information
julio-salas03 committed Sep 4, 2024
1 parent 5f162e1 commit c65cd3e
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 8 deletions.
2 changes: 1 addition & 1 deletion docs/src/content/docs/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 5 additions & 5 deletions src/components/SplitText.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand All @@ -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') {
Expand Down
11 changes: 11 additions & 0 deletions src/utils.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import React from 'react';

export function debounce<T extends any[]>(
func: (...args: T) => any,
timeout: number
Expand All @@ -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>
>;
4 changes: 2 additions & 2 deletions tests/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit c65cd3e

Please sign in to comment.