### Installing Text Stagger Library (pnpm)
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/text-stagger/README.md
This command installs the `text-stagger` library using pnpm, a fast, disk space efficient package manager. It's a prerequisite for using the library in a project.
```bash
pnpm install text-stagger
```
--------------------------------
### Installing React AI Flow with pnpm
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/react-ai-flow/README.md
This command installs the `react-ai-flow` library using the pnpm package manager, making it available for use in your project. It is a prerequisite for using the library's components.
```bash
pnpm install react-ai-flow
```
--------------------------------
### Installing React Text Stagger with pnpm
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/react-text-stagger/README.md
This command installs the `react-text-stagger` library using the pnpm package manager, making it available for use in your project. It's a prerequisite for utilizing the library's components.
```bash
pnpm install react-text-stagger
```
--------------------------------
### Installing React AI Flow with pnpm - Bash
Source: https://github.com/samdenty/react-ai-flow/blob/main/README.md
This snippet provides the command to install the `react-ai-flow` library, which is designed for advanced text animation effects in React applications, using the pnpm package manager.
```bash
pnpm install react-ai-flow
```
--------------------------------
### Installing Text Stagger with pnpm - Bash
Source: https://github.com/samdenty/react-ai-flow/blob/main/README.md
This snippet provides the command to install the `text-stagger` library, which is used for implementing staggered text effects directly with the plain JavaScript DOM API, using the pnpm package manager.
```bash
pnpm install text-stagger
```
--------------------------------
### Using StaggerProvider and StaggeredText Components in React
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/react-text-stagger/README.md
This example demonstrates how to integrate `StaggerProvider` and `StaggeredText` components to create staggered text animations. `StaggerProvider` configures the animation behavior (e.g., splitting by word, duration), while nested `StaggeredText` components apply the animation to their children sequentially, allowing for complex multi-stage animations.
```tsx
import { StaggerProvider, StaggeredText } from "react-text-stagger";
function App() {
return (
{/* Fades in text */}
Hello World
{/* Then fades in the background of the code block */}
{/* Then fades in each letter inside the code block */}
Hello world
);
}
```
--------------------------------
### Initializing Stagger and Observing Text - TypeScript
Source: https://github.com/samdenty/react-ai-flow/blob/main/README.md
This TypeScript snippet illustrates how to initialize a `Stagger` orchestrator instance and use its `observeText` method to apply staggered text animations to a specified DOM element. It demonstrates setting animation options like `splitter` and `duration` for fine-grained control over the text effects.
```typescript
import { Stagger } from "text-stagger";
// Create a stagger orchestrator instance
const stagger = new Stagger({
// options to pass
});
// Create a text instance
const text = stagger.observeText(someDivContainingText, {
splitter: 'word',
duration: 500,
});
```
--------------------------------
### Basic Usage of StaggerProvider and StaggeredText - TSX
Source: https://github.com/samdenty/react-ai-flow/blob/main/README.md
This React component demonstrates the basic usage of `StaggerProvider` and `StaggeredText` for creating staggered text fade-in animations. It shows how to wrap content with `StaggeredText` and configure animation properties like `splitter` and `duration` via `StaggerProvider`, including nested animations for complex effects.
```tsx
import { StaggerProvider, StaggeredText } from "react-ai-flow";
function App() {
return (
{/* Fades in text */}
Hello World
{/* Then fades in the background of the code block */}
{/* Then fades in each letter inside the code block */}
Hello world
);
}
```
--------------------------------
### Initializing Text Stagger and Observing Text (TypeScript)
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/text-stagger/README.md
This TypeScript snippet demonstrates how to import the `Stagger` class, create an orchestrator instance with optional configurations, and then use it to observe a DOM element containing text. The `observeText` method allows for fine-grained control over text animation, including splitting by 'word' and setting animation duration.
```typescript
import { Stagger } from "text-stagger";
// Create a stagger orchestrator instance
const stagger = new Stagger({
// options to pass
});
// Create a text instance
const text = stagger.observeText(someDivContainingText, {
splitter: 'word',
duration: 500,
});
```
--------------------------------
### Implementing Staggered Text Animations in React
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/react-ai-flow/README.md
This React component demonstrates how to use `StaggerProvider` and `StaggeredText` to create nested, staggered text animations. The `StaggerProvider` defines the animation behavior (e.g., splitting by word, duration), while `StaggeredText` applies the animation to its children, enabling sequential effects for different elements.
```tsx
import { StaggerProvider, StaggeredText } from "react-ai-flow";
function App() {
return (
{/* Fades in text */}
Hello World
{/* Then fades in the background of the code block */}
{/* Then fades in each letter inside the code block */}
Hello world
);
}
```
--------------------------------
### Using optimisticMarkdown for Streaming AI Responses - TypeScript
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/optimistic-markdown/README.md
This snippet demonstrates how to integrate `optimisticMarkdown` into an AI chat application to process streaming response chunks. It shows how to call the function with the `isLoading` option set to `true` to indicate ongoing generation, ensuring the UI updates gracefully with partially formed markdown.
```typescript
import { optimisticMarkdown } from "optimistic-markdown";
// Handle streaming AI response chunks
function processAIResponse(chunk: string) {
const formattedMarkdown = optimisticMarkdown(chunk, {
isLoading: true, // Indicates content is still being generated
});
// Update your UI with the formatted markdown
updateChatUI(formattedMarkdown);
}
```
--------------------------------
### Defining OptimisticMarkdownOptions Interface - TypeScript
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/optimistic-markdown/README.md
This TypeScript interface defines the available options for the `optimisticMarkdown` function. It includes `isLoading` to signal if content is still being generated and `markdownLinkTarget` to specify a default target for incomplete links, allowing for flexible configuration of the parser's behavior.
```typescript
interface OptimisticMarkdownOptions {
isLoading?: boolean; // Whether the AI is still generating content
markdownLinkTarget?: string; // Default target for incomplete links
}
```
--------------------------------
### Extracting Text Lines from DOM Element using text-element-lines (TypeScript)
Source: https://github.com/samdenty/react-ai-flow/blob/main/packages/text-element-lines/README.md
This snippet demonstrates how to use the `extractLines` and `extractTextFromLines` functions from the `text-element-lines` library. `extractLines` iterates over each line, providing its index, block parent, and inner text. `extractTextFromLines` extracts all text from the lines of an element as a single string. It requires a DOM element as input.
```TypeScript
import { extractLines, extractTextFromLines } from "text-element-lines";
for (const line of extractLines(element)) {
console.log(line.index, line.blockParent, line.innerText);
}
console.log(extractTextFromLines(element))
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.