### TypeIt React with HTML and Components

Source: https://github.com/alexmacarthur/typeit/blob/master/packages/typeit-react/README.md

Allows children to fully render HTML and components before typing. This example nests a custom 'SuperStrong' component.

```javascript
import TypeIt from "typeit-react";

// This could be any component that generates HTML.
const SuperStrong = ({ children }) => {
    return <strong style={{ fontSize: "80px" }}>{children}</strong>;
};

export default () => {
    return (
        <div className="App">
            <TypeIt>
                Weak text. <SuperStrong>Super strong text.</SuperStrong>
            </TypeIt>
        </div>
    );
};
```

--------------------------------

### TypeIt React Instance Access with getAfterInit

Source: https://github.com/alexmacarthur/typeit/blob/master/packages/typeit-react/README.md

Leverage the 'getAfterInit' prop to access the TypeIt instance after initialization for methods like .freeze(), .unfreeze(), and .is(). This example toggles freezing based on a button click.

```javascript
import TypeIt from "typeit-react";
import { useState } from "react";

export default () => {
    const [buttonText, setButtonText] = useState("Freeze");
    const [instance, setInstance] = useState(null);

    const toggleFreeze = () => {
        if (instance.is("frozen")) {
            instance.unfreeze();
            setButtonText("Freeze");
            return;
        }

        instance.freeze();
        setButtonText("Unfreeze");
    };

    return (
        <div className="App">
            <button onClick={toggleFreeze}>{buttonText}</button>

            <TypeIt
                options={{ loop: true }}
                getAfterInit={(instance) => {
                    setInstance(instance);
                    return instance;
                }}
            >
                This will just keep on going.
            </TypeIt>
        </div>
    );
};
```

--------------------------------

### TypeIt React with Custom Element

Source: https://github.com/alexmacarthur/typeit/blob/master/packages/typeit-react/README.md

Specify a different HTML element for the typing animation using the 'element' prop. This example uses an H3 tag.

```javascript
import TypeIt from "typeit-react";

export default () => {
    return (
        <div className="App">
            <TypeIt element="h3">This will be typed in an H3 tag.</TypeIt>
        </div>
    );
};
```

--------------------------------

### TypeIt React Instance Initialization with onBeforeInit

Source: https://github.com/alexmacarthur/typeit/blob/master/packages/typeit-react/README.md

Use the 'onBeforeInit' prop to access and modify the TypeIt instance before initialization using methods like .type(), .pause(), and .delete().

```javascript
import TypeIt from "typeit-react";

<TypeIt
    getBeforeInit={(instance) => {
        instance
            .type("Hi, I'm Alxe")
            .pause(750)
            .delete(2)
            .pause(500)
            .type("ex!");

        // Remember to return it!
        return instance;
    }}
/>;
```

--------------------------------

### TypeIt React with Custom Options

Source: https://github.com/alexmacarthur/typeit/blob/master/packages/typeit-react/README.md

Customize animation speed and other TypeIt options by passing an object to the 'options' prop. Strings can also be set here.

```javascript
import TypeIt from "typeit-react";

export default () => {
    return (
        <div className="App">
            <TypeIt
                options={{
                    strings: ["This will be typed!"],
                    speed: 10,
                    waitUntilVisible: true,
                }}
            />
        </div>
    );
};
```

--------------------------------

### Basic TypeIt React Usage

Source: https://github.com/alexmacarthur/typeit/blob/master/packages/typeit-react/README.md

Import and use the TypeIt component to wrap text for a typewriter effect. By default, it uses a span element.

```javascript
import TypeIt from "typeit-react";

export default () => {
    return (
        <div className="App">
            <TypeIt>This will be typed in a `span` element!</TypeIt>
        </div>
    );
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.