chore: docs

docs/iframe.html

@@ -348,7 +348,7 @@
  window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.js';
 
 
- import './runtime~main.c80b5a5e.iframe.bundle.js';
+ import './runtime~main.7aee511f.iframe.bundle.js';
 
  import './764.155d19ca.iframe.bundle.js';
 

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1706116690255,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{"builder":{"useSWC":true}}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.6.10","storybookVersionSpecifier":"^7.6.10","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.6.10"},"@storybook/react":{"version":"7.6.10"},"@storybook/react-webpack5":{"version":"7.6.10"},"@storybook/test":{"version":"7.6.10"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.6.10"}},"addons":{"@storybook/addon-links":{"version":"7.6.10"},"@storybook/addon-essentials":{"version":"7.6.10"},"@storybook/addon-onboarding":{"version":"1.0.10"},"@storybook/addon-interactions":{"version":"7.6.10"}}}
+{"generatedAt":1706148543707,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-webpack5","options":{"builder":{"useSWC":true}}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.6.10","storybookVersionSpecifier":"^7.6.10","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.6.10"},"@storybook/react":{"version":"7.6.10"},"@storybook/react-webpack5":{"version":"7.6.10"},"@storybook/test":{"version":"7.6.10"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.6.10"}},"addons":{"@storybook/addon-links":{"version":"7.6.10"},"@storybook/addon-essentials":{"version":"7.6.10"},"@storybook/addon-onboarding":{"version":"1.0.10"},"@storybook/addon-interactions":{"version":"7.6.10"}}}

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-typed",
- "version": "2.0.11",
+ "version": "2.0.12",
  "description": "A react wrapper for typed.js",
  "main": "dist/cjs/index.js",
  "module": "dist/mjs/index.js",
@@ -19,9 +19,8 @@
  "scripts": {
  "build": "rm -fr dist/* && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
  "postbuild": "echo '{\"type\": \"commonjs\"}'>> dist/cjs/package.json && echo '{\"type\": \"module\"}'>> dist/mjs/package.json",
- "start": "start-storybook -p 6006",
+ "start": "storybook dev -p 6007",
  "test": "jest --coverage",
- "storybook": "storybook dev -p 6006",
  "docs": "storybook build -o docs"
  },
  "author": "Mike Antoniadis <[email protected]> (http://ssbeefeater.github.io/)",

src/index.tsx

@@ -1,6 +1,31 @@
 import React, { memo, useMemo, useRef, useEffect } from "react";
 import Typed from "typed.js";
 export interface ReactTypedProps {
+ stopped?: boolean;
+ /**
+ * if true will be initialized in stopped state
+ * @default false
+ * */
+ startWhenVisible?: boolean;
+ /**
+ * Styles for the created element in case children is not provided
+ * */
+ style?: React.CSSProperties;
+ /**
+ * class name for the created element in case children is not provided
+ * */
+ className?: string;
+ /**
+ * In some custom component dom element is not in the ref.current property.
+ * ie an Input by antd the element is in input property ( ref.current.input )
+ * you can use this function to get the element from the ref
+ * @default (ref)=>ref.current
+ * */
+ parseRef?: (ref: React.RefObject<any>) => HTMLElement;
+ /**
+ * Returns the typed instance
+ * */
+ typedRef?: (typed: Typed) => void;
  /**
  * strings to be typed
  * @default [
@@ -10,6 +35,7 @@ export interface ReactTypedProps {
  'Have a great day!',
  ]
  * */
+ children?: React.ReactElement;
  strings?: string[];
  /**
  * ID or instance of HTML element of element containing string children
@@ -104,7 +130,7 @@ export interface ReactTypedProps {
  /**
  * Before it begins typing the first string
  */
- onBegin?(self: Typed): void;
+ onBegin?: (self: Typed) => number;
  /**
  * All typing is complete
  */
@@ -145,44 +171,14 @@ export interface ReactTypedProps {
  * After destroy
  */
  onDestroy?(self: Typed): void;
- /**
- * Styles for the outer element
- * */
- style?: React.CSSProperties;
- /**
- * class name for the outer element
- * */
- className?: string;
- /**
- * callback that returns the typed instance
- * */
- typedRef?: (typed: Typed) => void;
- /**
- * if true will be initialized in stopped state
- * @default false
- * */
- stopped?: boolean;
- /**
- * In some custom component dom element is not in the ref.current property.
- * ie an Input by antd the element is in input property ( ref.current.input )
- * you can use this function to get the element from the ref
- * @default (ref)=>ref.current
- * */
- parseRef?: (ref: React.RefObject<any>) => HTMLElement;
- /**
- * if true will start only when the element is visible
- * @default false
- * */
- startWhenVisible?: boolean;
- children?: React.ReactElement;
 }
 
 export const ReactTyped: React.FC<ReactTypedProps> = memo(
  ({
  style,
  className,
  typedRef,
- parseRef: transformRef,
+ parseRef,
  stopped,
  children,
  startWhenVisible,
@@ -203,7 +199,7 @@ export const ReactTyped: React.FC<ReactTypedProps> = memo(
  );
  useEffect(() => {
  const element =
- (transformRef && transformRef(rootElement)) || rootElement.current;
+ (parseRef && parseRef(rootElement)) || rootElement.current;
  const typed = new Typed(element, { ...typedOptions });
 
  if (stopped || startWhenVisible) {
@@ -229,17 +225,13 @@ export const ReactTyped: React.FC<ReactTypedProps> = memo(
  }, shouldUpdateArgs);
 
  const child = !children ? (
- <span style={style} ref={rootElement} />
+ <span style={style} className={className} ref={rootElement} />
  ) : (
  React.cloneElement(children, {
  ref: rootElement,
  })
  );
- return (
- <span style={style} className={className} data-testid="react-typed">
- {child}
- </span>
- );
+ return child;
  }
 );