npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-mentions-silvacpp

v0.0.3

Published

React mentions input

Downloads

57

Readme

React Mentions

A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.

Used in production at Signavio, State, Snips, Swat.io, GotDone, Volinspire, Marvin, Timely, GuideFitter, Evite, Publer, Kontentino, Wix.com, Highlight and you?

Getting started

Install the react-mentions package via npm:

npm install react-mentions --save

Or yarn:

yarn add react-mentions

The package exports two React components for rendering the mentions textarea:

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

MentionsInput is the main component rendering the textarea control. It takes one or multiple Mention components as its children. Each Mention component represents a data source for a specific class of mentionable objects, such as users, template variables, issues, etc.

Example:

<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>

You can find more examples here: demo/src/examples

Configuration

The MentionsInput supports the following props for configuring the widget:

| Prop name | Type | Default value | Description | | --------------------------- | ------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | value | string | '' | The value containing markup for mentions | | onChange | function (event, newValue, newPlainTextValue, mentions) | empty function | A callback that is invoked when the user changes the value in the mentions input | | onKeyDown | function (event) | empty function | A callback that is invoked when the user presses a key in the mentions input | | singleLine | boolean | false | Renders a single line text input instead of a textarea, if set to true | | onBlur | function (event, clickedSuggestion) | empty function | Passes true as second argument if the blur was caused by a mousedown on a suggestion | | allowSpaceInQuery | boolean | false | Keep suggestions open even if the user separates keywords with spaces. | | suggestionsPortalHost | DOM Element | undefined | Render suggestions into the DOM in the supplied host element. | | inputRef | React ref | undefined | Accepts a React ref to forward to the underlying input element | | allowSuggestionsAboveCursor | boolean | false | Renders the SuggestionList above the cursor if there is not enough space below | | forceSuggestionsAboveCursor | boolean | false | Forces the SuggestionList to be rendered above the cursor | | a11ySuggestionsListLabel | string | '' | This label would be exposed to screen readers when suggestion popup appears | | customSuggestionsContainer | function(children) | empty function | Allows customizing the container of the suggestions | | replaceMarkupOnPaste | boolean | true | Any paste event inside the mention range replaces the full markup text with the clipboard data. To allow the browser to replace only the selection inside the mention range, set this prop to false |

Each data source is configured using a Mention component, which has the following props:

| Prop name | Type | Default value | Description | | ---------------- | ------------------------------------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | trigger | regexp or string | '@' | Defines the char sequence upon which to trigger querying the data source | | data | array or function (search, callback) | null | 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 | | renderSuggestion | function (entry, search, highlightedDisplay, index, focused) | null | Allows customizing how mention suggestions are rendered (optional) | | markup | string | '@[__display__](__id__)' | A template string for the markup to use for mentions | | displayTransform | function (id, display) | returns display | Accepts a function for customizing the string that is displayed for a mention | | regex | RegExp | automatically derived from markup pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) | | | onAdd | function (id, display, startPos, endPos) | empty function | Callback invoked when a suggestion has been added (optional) | | appendSpaceOnAdd | boolean | false | Append a space when a suggestion has been added (optional) |

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.)

Styling

react-mentions supports css, css modules, and inline styles. It is shipped with only some essential inline style definitions and without any css. Some example inline styles demonstrating how to customize the appearance of the MentionsInput can be found at demo/src/examples/defaultStyle.js.

If you want to use css, simply assign a className prop to MentionsInput. All DOM nodes rendered by the component will then receive class name attributes that are derived from the base class name you provided.

If you want to avoid global class names and use css modules instead, you can provide the automatically generated class names as classNames to the MentionsInput. See demo/src/examples/CssModules.js for an example of using react-mentions with css modules.

You can also assign className and style props to the Mention elements to define how to highlight the mentioned words.

Testing

Due to react-mentions' internal cursor tracking it is not good enough to simulate the editing of the textarea value using ReactTestUtils.Simulate.change. We recommend using @testing-library/user-event for a realistic simulation of events as they would happen in the browser as the user interacts the textarea.


If you want to contribute, first of all: thank you ❤️. Please check CONTRIBUTING.md and/or create an issue.