https://github.com/dooly-ai/draft-js-typeahead

Typeaheads for Draft.js inspired by Facebook.com 🔭
https://github.com/dooly-ai/draft-js-typeahead

draftjs facebook typeahead

Last synced: 3 months ago
JSON representation

Typeaheads for Draft.js inspired by Facebook.com 🔭

• Host: GitHub
• URL: https://github.com/dooly-ai/draft-js-typeahead
• Owner: dooly-ai
• License: mit
• Created: 2016-03-25T22:30:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-23T18:24:46.000Z (over 6 years ago)
• Last Synced: 2024-03-22T11:09:07.307Z (3 months ago)
• Topics: draftjs, facebook, typeahead
• Language: JavaScript
• Homepage:
• Size: 1.3 MB
• Stars: 121
• Watchers: 6
• Forks: 16
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-draft-js - Draft.js Typeahead - Support for typeahead functionality. (Plugins and Decorators Built for Draft.js)
• awesome-draft-js - Draft.js Typeahead - Support for typeahead functionality. (Plugins and Decorators Built for Draft.js)

README

        
# draft-js-typeahead

[![NPM version][npm-image]][npm-url]

Typeaheads for [Draft.js](https://github.com/facebook/draft-js) inspired by Facebook.com.

![example](example.gif)

[Check out an example of mentions in draft using draft-js-typeahead here. 🎉](http://dooly-ai.github.io/draft-js-typeahead/)

This package provides a higher-order component that wraps draft's `Editor` component and augments it with typeahead superpowers. One popular use for draft-js-typeahead is to add mentions to your editors.

-

draft-js-typeahead helps in three ways:

 - It figures out *if* and *where* the typeahead should be showing.

 - It keeps track of the typeahead's highlighted item.

 - It triggers a callback when an item is selected (by hitting return).

## Installation

```sh

$ npm install --save draft-js-typeahead

```

## Examples

[Examples are available under the `examples/` directory.](examples/)

## Usage

First we'll need to import `TypeaheadEditor`:

```javascript

import { TypeaheadEditor } from 'draft-js-typeahead';

```

`TypeaheadEditor` is a react component that wraps draft's `Editor`.

-

It supports all of the same properties as the latter, as well as a few others:

`onTypeaheadChange => (typeaheadState)`:

This method is called when the typeahead's *visibility*, *position*, or *text* changes. `typeaheadState` is an object with `left`, `top`, `text`, and `selectedIndex` properties. A typical callback sets `typeaheadState` on its own state and uses it to render an overlay in its component's `render` method. This method is also called when the typeahead is hidden by passing `null` to `typeaheadState`.

`handleTypeaheadReturn => (text, selectedIndex, selection)`:

This method is called when an item in the typeahead is selected (by hitting return). A typical callback autocompletes the editor with the selected item and tags it with a draft entity.

*Note:* By default draft-js-typeahead does not filter items in the typeahead based on the entered text, [see the mentions example for one approach to filtering](/examples/mentions).

## License

MIT © [Justin Vaillancourt](mailto:[email protected])

[npm-image]: https://badge.fury.io/js/draft-js-typeahead.svg

[npm-url]: https://npmjs.org/package/draft-js-typeahead