### Install Dependencies

Source: https://github.com/signavio/react-mentions/blob/master/CONTRIBUTING.md

Installs all necessary development dependencies for the project using Yarn.

```bash
yarn
```

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

### Install React Mentions

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Instructions for installing the react-mentions package using npm or yarn.

```bash
npm install react-mentions --save
```

```bash
yarn add react-mentions
```

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

### Basic Usage Example

Source: https://github.com/signavio/react-mentions/blob/master/README.md

A fundamental example demonstrating how to use MentionsInput with two different Mention components for user and tag mentions.

```jsx
<MentionsInput value={this.state.value} onChange={this.handleChange}>
  <Mention
    trigger="@"
    data={this.props.users}
    renderSuggestion={this.renderUserSuggestion}
  />
  <Mention
    trigger="#"
    data={this.requestTag}
    renderSuggestion={this.renderTagSuggestion}
  />
</MentionsInput>
```

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

### Build Project

Source: https://github.com/signavio/react-mentions/blob/master/CONTRIBUTING.md

Builds the project, typically to generate distributable files.

```bash
yarn build
```

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

### Run Tests

Source: https://github.com/signavio/react-mentions/blob/master/CONTRIBUTING.md

Executes the test suite to validate code changes.

```bash
yarn test
```

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

### Basic Usage of React Mentions

Source: https://github.com/signavio/react-mentions/blob/master/demo/src/index.html

Demonstrates how to integrate the React Mentions component into a React application to enable user mentions.

```jsx
import React, { useState } from 'react';
import MentionsInput, { Mention } from '@signavio/react-mentions';

function App() {
  const [value, setValue] = useState('');

  const users = [
    { id: '1', display: 'Alice' },
    { id: '2', display: 'Bob' },
    { id: '3', display: 'Charlie' },
  ];

  return (
    <div>
      <label>Mention someone:</label>
      <MentionsInput
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="@Type to mention someone"
      >
        <Mention
          trigger="@"
          data={users}
          appendSpaceAfterSelection={true}
        />
      </MentionsInput>
      <p>Current value: {value}</p>
    </div>
  );
}

export default App;
```

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

### Create Changeset

Source: https://github.com/signavio/react-mentions/blob/master/CONTRIBUTING.md

Generates a changeset file to manage package versioning and changelogs.

```bash
yarn changeset
```

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

### Import Components

Source: https://github.com/signavio/react-mentions/blob/master/README.md

How to import the necessary components, MentionsInput and Mention, from the react-mentions package.

```javascript
import { MentionsInput, Mention } from 'react-mentions'
```

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

### Testing with user-event

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Recommends using `@testing-library/user-event` for realistic simulation of user interactions with the textarea.

```javascript
/* Due to react-mentions' internal cursor tracking, simulating textarea changes with ReactTestUtils.Simulate.change is insufficient. */
/* Use @testing-library/user-event for realistic event simulation. */

import userEvent from '@testing-library/user-event';

// ... inside a test
const inputElement = screen.getByRole('textbox');
userEvent.type(inputElement, '@mention');
// Further interactions to test mention selection
```

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

### Styling with CSS Modules

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Illustrates how to use CSS Modules with react-mentions by providing generated class names.

```javascript
/* Example of using react-mentions with CSS Modules */
import styles from './MentionsInput.module.css';

<MentionsInput
  classNames={{
    input: styles.input,
    suggestions: styles.suggestions,
    suggestion: styles.suggestion,
    selected: styles.selected,
  }}
/>
```

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

### Asynchronous Data Loading

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Demonstrates how to handle asynchronous data loading for suggestions by passing a function to the `data` prop.

```javascript
// If a function is passed as the `data` prop, that function will be called with the current search query as first, and a callback function as second argument.
// The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)

<MentionsInput
  data={ (query, callback) => {
    fetch(`/api/users?query=${query}`)
      .then(response => response.json())
      .then(users => callback(users));
  }}
/>
```

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

### Mention Component Configuration

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Configuration props for the Mention component, used to define data sources for mentions.

```APIDOC
Mention Props:

trigger: regexp or string
  Defines the char sequence upon which to trigger querying the data source.
  Default: '@'

data: array or function (search, callback)
  An array of the mentionable data entries (objects with `id` & `display` keys, or a filtering function that returns an array based on a query parameter).
  Default: null

renderSuggestion: function (entry, search, highlightedDisplay, index, focused)
  Allows customizing how mention suggestions are rendered (optional).
  Default: null

markup: string
  A template string for the markup to use for mentions.
  Default: '@[__display__](__id__)'
```

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

### Styling with CSS

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Explains how to apply CSS styles to the MentionsInput component using the `className` prop.

```css
/* Assign a className prop to MentionsInput to apply CSS styles. */
/* All DOM nodes rendered by the component will receive class name attributes derived from the base class name. */

.mentions-input {
  /* Your custom styles here */
  border: 1px solid #ccc;
  padding: 10px;
}

.mentions-input .mention {
  /* Styles for individual mentions */
  color: blue;
  font-weight: bold;
}
```

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

### MentionsInput Configuration

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Configuration props for the MentionsInput component, controlling its behavior and appearance.

```APIDOC
MentionsInput Props:

value: string
  The value containing markup for mentions.
  Default: ''

onChange: function (event, newValue, newPlainTextValue, mentions)
  A callback that is invoked when the user changes the value in the mentions input.
  Default: empty function

onKeyDown: function (event)
  A callback that is invoked when the user presses a key in the mentions input.
  Default: empty function

singleLine: boolean
  Renders a single line text input instead of a textarea, if set to true.
  Default: false

onBlur: function (event, clickedSuggestion)
  Passes true as second argument if the blur was caused by a mousedown on a suggestion.
  Default: empty function

allowSpaceInQuery: boolean
  Keep suggestions open even if the user separates keywords with spaces.
  Default: false

suggestionsPortalHost: DOM Element
  Render suggestions into the DOM in the supplied host element.
  Default: undefined

inputRef: React ref
  Accepts a React ref to forward to the underlying input element.
  Default: undefined

allowSuggestionsAboveCursor: boolean
  Renders the SuggestionList above the cursor if there is not enough space below.
  Default: false

forceSuggestionsAboveCursor: boolean
  Forces the SuggestionList to be rendered above the cursor.
  Default: false

a11ySuggestionsListLabel: string
  This label would be exposed to screen readers when suggestion popup appears.
  Default: ''

customSuggestionsContainer: function(children)
  Allows customizing the container of the suggestions.
  Default: empty function

inputComponent: React component
  Allows the use of a custom input component component.
  Default: undefined
```

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

### MentionsInput Props

Source: https://github.com/signavio/react-mentions/blob/master/README.md

Defines the properties available for the MentionsInput component, allowing customization of mention display, parsing, and behavior.

```APIDOC
displayTransform:
  type: function
  description: Accepts a function for customizing the string that is displayed for a mention. It receives the mention ID and display value, and should return the display string.
  parameters:
    - id: The unique identifier of the mention.
    - display: The default display string for the mention.
  returns: The customized display string.

regex:
  type: RegExp
  description: Allows providing a custom regular expression for parsing markup and extracting placeholder interpolations. If not provided, it's derived from the `markup` pattern.
  returns: A RegExp object.

onAdd:
  type: function
  description: Callback invoked when a suggestion has been added. It receives the mention ID, display value, and the start and end positions of the mention in the text.
  parameters:
    - id: The unique identifier of the mention.
    - display: The display string of the mention.
    - startPos: The starting character index of the mention.
    - endPos: The ending character index of the mention.
  returns: void.

appendSpaceOnAdd:
  type: boolean
  default: false
  description: If true, a space character will be appended after a suggestion is added to the input.
```

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

### Customizing Mention Data

Source: https://github.com/signavio/react-mentions/blob/master/demo/src/index.html

Shows how to provide custom data for mentions, including filtering and display logic.

```javascript
const customUsers = [
  { id: 'user1', name: 'Alice Wonderland', email: 'alice@example.com' },
  { id: 'user2', name: 'Bob The Builder', email: 'bob@example.com' },
];

// In your MentionsInput component:
<MentionsInput
  // ... other props
>
  <Mention
    trigger="@"
    data={({ searchTerm }) => {
      return customUsers
        .filter(({ name }) => name.toLowerCase().includes(searchTerm.toLowerCase()))
        .map(user => ({ id: user.id, display: `${user.name} (${user.email})` }));
    }}
  />
</MentionsInput>
```

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