### Start the test application (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Navigates into the test application directory and starts the development server. Provides commands for both npm and yarn.

```bash
cd ../test_app

# npm
npm start
```

```bash
cd ../test_app

# yarn
yarn start
```

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

### Install dependencies and build component (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Navigates into the component directory, installs project dependencies, and builds the component. Provides commands for both npm and yarn.

```bash
cd tweet-textarea-react

# npm
npm install
npm build
```

```bash
cd tweet-textarea-react

# yarn
yarn install
yarn build
```

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

### Install Playwright browsers and dependencies (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Installs the necessary browsers and system dependencies required to run Playwright tests. Provides commands for both npm and yarn.

```bash
# npm
npx playwright install
npx playwright install-deps
```

```bash
# yarn
yarn playwright install
yarn playwright install-deps
```

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

### Install TweetTextarea React Component

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Install the TweetTextarea React component using either npm or yarn package managers. This command adds the component as a dependency to your project.

```bash
npm install --save tweet-textarea-react
```

```bash
yarn add tweet-textarea-react
```

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

### Importing tweet-textarea-react Component

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Demonstrates how to import the TweetTextarea component into your JavaScript or TypeScript project using both ES6 module syntax and CommonJS require syntax after installing the package.

```javascript
// ES6
import TweetTextarea from "tweet-textarea-react";

// CommonJS
const TweetTextarea = require("tweet-textarea-react");
```

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

### Handling TweetTextarea State Updates (TypeScript)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Shows example implementations for the `onTextUpdate` and `onCursorChange` event handlers used when the TweetTextarea is controlled by a parent component. These functions update the parent's state based on changes occurring within the textarea.

```typescript
function App() {
    ...

    const handleTextUpdate = (event) => {
        setTweetText(event.detail.currentText);
    }

    const handleCursorPositionChange = (event) => {
        setTextCursorPosition(event.detail)
    }

    ...
}
```

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

### Implementing Controlled TweetTextarea Component (TypeScript)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Provides a TypeScript example demonstrating how to manage the TweetTextarea component's state (text value and cursor position) externally using React's `useState` hook. It requires passing `value`, `cursorPosition`, `onTextUpdate`, and `onCursorChange` props and uses the exported `ICursorChangeDetail` type.

```typescript
function App() {
  const { tweetText, setTweetText } = useState<string>("");
  const { textCursorPosition, setTextCursorPosition } =
    useState<ICursorChangeDetail>({ start: 0, end: 0 });

  return (
    <TweetTextarea
      value={tweetText}
      cursorPosition={textCursorPosition}
      onTextUpdate={handleTextUpdate}
      onCursorChange={handleCursorPositionChange}
    />
  );
}
```

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

### Create and navigate to project directory (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Creates a new directory for the project and changes the current directory to it.

```bash
mkdir TweetTextarea
cd TweetTextarea
```

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

### Create test app with JavaScript (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Uses create-react-app to generate a new React application named 'test_app' using the default JavaScript template. Provides commands for both npm and yarn.

```bash
# npm
npx create-react-app test_app
```

```bash
# yarn
yarn create react-app test_app
```

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

### Create test app with TypeScript (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Uses create-react-app to generate a new React application named 'test_app' using the TypeScript template. Provides commands for both npm and yarn.

```bash
# npm
npx create-react-app test_app --template typescript
```

```bash
# yarn
yarn create react-app test_app --template typescript
```

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

### Clone the repository (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Clones the tweet-textarea-react repository from GitHub into the current directory.

```bash
git clone https://github.com/amsaid1989/tweet-textarea-react.git
```

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

### Run Playwright tests (Bash)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Executes the Playwright test suite for the project. Provides commands for both npm and yarn.

```bash
# npm
npm test
```

```bash
# yarn
yarn test
```

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

### Rendering Basic TweetTextarea Component

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Shows the simplest way to render the TweetTextarea component within a functional React component, using its default configuration and styles.

```javascript
function App() {
  return <TweetTextarea />;
}
```

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

### Import and render TweetTextarea component (JavaScript)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Demonstrates how to import the TweetTextarea component into a React application and render it within a functional component.

```javascript
import TweetTextarea from "tweet-textarea-react";

function App() {
  return <TweetTextarea />;
}
```

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

### Styling TweetTextarea Highlights with Custom Class

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Explains how to customize the appearance of highlighted elements within the text (like URLs, hashtags) by providing a custom CSS class name via the `highlightClassName` prop.

```javascript
function App() {
  return <TweetTextarea highlightClassName="custom-highlight" />;
}
```

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

### Inserting Text at Cursor in Controlled TweetTextarea (TypeScript)

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Presents a TypeScript function that demonstrates how to programmatically insert text into the TweetTextarea at the current cursor position when using it as a controlled component. It updates both the text value and the cursor position state in the parent component to trigger a re-render.

```typescript
function App() {
    ...

    const insertTextAtCursor = (textToInsert) => {
        // Split the text at the cursor position
        const before = tweetText.slice(0, textCursorPosition.start);
        const after = tweetText.slice(textCursorPosition.end);

        // Insert the new text
        const updatedText = before + textToInsert + after;

        // Calculate the new cursor position
        const newCursorPosition = textCursorPosition.start + textToInsert.length;

        // Update the parent component state
        setTextCursorPosition({start: newCursorPosition, end: newCursorPosition});
        setTweetText(updatedText);
    }

    ...
}
```

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

### Styling TweetTextarea with Custom Class

Source: https://github.com/amsaid1989/tweet-textarea-react/blob/main/README.md

Illustrates how to apply custom CSS styles to the main textarea element by passing a class name to the `className` prop, overriding the component's default textarea styling.

```javascript
function App() {
  return <TweetTextarea className="custom-class" />;
}
```

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