This package has been deprecated

Author message:

This package has been deprecated. Please use the '@atlaskit' scoped packages instead. See https://atlaskit.atlassian.com for more information

ak-mention

Mention

The main purpose of the mention component is to provide a mention picker for choosing users to mention within a text field or editor.

It includes support for rest based searching and custom search implementations.

Try it out

Interact with a live demo of the ak-mention.

Installation

npm install ak-mention

Using the component

Import the component in your React app as follows:

import MentionPicker, { MentionResource } from 'ak-mention';
const mentionProvider = new MentionResource({
  url: 'http://example-mention-server/service',
  securityProvider: () => {
    return {
        headers: {
            Authorization: getSecurityTokenForService(...)
        }
    };
  },
  refreshSecurityProvider: () => {
    // Optional, but allows for a retry if a 401 is returned by trying a new token
    // useful if a token is not guaranteed to be valid. e.g. stored in a cache, but
    // may be revoked to expire early in some circumstances
    return new Promise((resolve) => {
      ...
      getSecurityTokenForService(...).then((token) => {
        resolve(token);
      })
    })
  },
});
 
ReactDOM.render(
  <MentionPicker
    resourceProvider={mentionResource}
    query="John"
    onSelection={(mention) => { /* do something */ }}
  />, container);

If a target property is provided with a position property, then the Picker will automatically be positioned floating above that element. The target is a id of an element on the page. position may be one of above, below or auto.

If these are omitted, the picker will be rendered directly inline, and any positioning will need to be managed by the consumer. An optional zIndex may be provided, if required to ensure that MentionPicker appears above other elements on the page. The MentionPicker will be rendered at the bottom of the DOM.

Key navigation can be bound to selectNext (e.g. down arrow), selectPrevious (e.g. up arrow), and chooseCurrentSelection (e.g. enter and tab).

Classes

MentionPicker

Members

MentionResource

Provides a Javascript API

mention

Describes ak-mention related proptypes that are reused across components.

Functions

requestService() ⇒

MentionPicker

Kind: global class

MentionResource

Provides a Javascript API

Kind: global variable

mention

Describes ak-mention related proptypes that are reused across components.

Kind: global variable

requestService() ⇒

Kind: global function
Returns: Promise containing the json response

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!