# ak-mention

> ak-mention component

Latest version **1.9.0** (published 2017-01-16) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ak-mention
pnpm add ak-mention
yarn add ak-mention
bun add ak-mention
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.9.0 |
| Published | 2017-01-16 |
| First published | 2016-12-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Atlassian Pty. Ltd |
| Maintainers | atlassian-aui |
| Keywords | atlaskit, ui, mention, fabric |

## Links

- npm: https://www.npmjs.com/package/ak-mention
- Repository: https://bitbucket.org/atlassian/atlaskit
- Homepage: https://bitbucket.org/atlassian/atlaskit#readme
- npm.io page: https://npm.io/package/ak-mention

## Dependencies (10)

- [uid](https://npm.io/package/uid.md) ^0.0.2
- [ak-avatar](https://npm.io/package/ak-avatar.md) ^5.1.1
- [ak-lozenge](https://npm.io/package/ak-lozenge.md) ^5.0.4
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [es6-promise](https://npm.io/package/es6-promise.md) ^4.0.5
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^1.0.0
- [akutil-common](https://npm.io/package/akutil-common.md) ^5.0.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6
- [url-search-params](https://npm.io/package/url-search-params.md) ^0.6.1
- [akutil-shared-styles](https://npm.io/package/akutil-shared-styles.md) ^37.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.9.0 (latest) — 2017-01-16
- 1.8.0 — 2017-01-11
- 1.7.2 — 2017-01-03
- 1.7.1 — 2017-01-03
- 1.7.0 — 2016-12-30
- 1.6.0 — 2016-12-30
- 1.5.1 — 2016-12-29
- 1.5.0 — 2016-12-20
- 1.4.0 — 2016-12-19
- 1.3.1 — 2016-12-09
- 1.3.0 — 2016-12-08
- 1.2.1 — 2016-12-08
- 1.2.0 — 2016-12-07
- 1.1.0 — 2016-12-06
- 1.0.0 — 2016-12-06

## README

[![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://Commitizen.github.io/cz-cli/)
[![semantic-release](https://img.shields.io/badge/GitHub-semantic_release-ffab00.svg)](https://github.com/semantic-release/semantic-release)
[![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-mention,ak-mention@1.9.0)

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

![Example mention](https://bytebucket.org/atlassian/atlaskit/raw/256f0c77d388755e52806468536e03811b4e2029/packages/ak-mention/docs/mention.png)

## Try it out

Interact with a [live demo of the ak-mention](https://aui-cdn.atlassian.com/atlaskit/stories/ak-mention/1.9.0/).

## Installation

```sh
npm install ak-mention
```

## Using the component
Import the component in your React app as follows:
```js
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

<dl>
<dt><a href="#MentionPicker">MentionPicker</a></dt>
<dd></dd>
</dl>

## Members

<dl>
<dt><a href="#MentionResource">MentionResource</a></dt>
<dd><p>Provides a Javascript API</p>
</dd>
<dt><a href="#mention">mention</a></dt>
<dd><p>Describes ak-mention related proptypes that are reused across components.</p>
</dd>
</dl>

## Functions

<dl>
<dt><a href="#requestService">requestService()</a> ⇒</dt>
<dd></dd>
</dl>

<a name="MentionPicker"></a>

## MentionPicker
**Kind**: global class  
<a name="MentionResource"></a>

## MentionResource
Provides a Javascript API

**Kind**: global variable  
<a name="mention"></a>

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

**Kind**: global variable  
<a name="requestService"></a>

## 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](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-mention,ak-mention@1.9.0).

Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).


### Create a support ticket

Are you in trouble? [Let us know](https://ecosystem.atlassian.net/browse/AK)!

---
_Source: https://npm.io/package/ak-mention · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._