Skip to content
This repository was archived by the owner on May 8, 2024. It is now read-only.

Commit 1b144d5

Browse files
jvailljvaill
committed
Update README.
1 parent a3e9e38 commit 1b144d5

File tree

4 files changed

+69
-49
lines changed

4 files changed

+69
-49
lines changed

‎README.md‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,49 @@
1-
# draft-js-typeahead [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]
2-
>
1+
# draft-js-typeahead
2+
3+
[![NPM version][npm-image]][npm-url]
4+
5+
Typeaheads for Draft.js inspired by Facebook.com.
6+
7+
This package provides a higher-order component that wraps draft's `Editor` and augments it with typeahead superpowers. One popular use for `draft-js-typeahead` is to add mentions to your editors.
38

49
## Installation
510

611
```sh
712
$ npm install --save draft-js-typeahead
813
```
14+
## Examples
915

10-
## Usage
16+
An example is worth a million words. Please check out the examples under the [/examples](examples) directory.
1117

12-
```js
13-
var draftjsMentions = require('draft-js-typeahead');
18+
## Usage with ES6
1419

15-
draftjsMentions('Rainbow');
20+
`draft-js-typeahead` helps in three ways:
21+
- It figures out if and where the typeahead should be showing.
22+
- It keeps track of the typeahead's currently selected item.
23+
- It provides a callback for when a typeahead item is locked in (by hitting return).
24+
25+
To start using it, first import `TypeaheadEditor`:
26+
27+
```js
28+
import { TypeaheadEditor } from 'draft-js-typeahead';
1629
```
30+
31+
`TypeaheadEditor` is a react component that wraps draft's `Editor` and subsequently supports all of the same properties as the latter, as well as a few others.
32+
33+
`onTypeaheadChange => (typeaheadState)`:
34+
35+
This method is called when the typeahead's visibility, position, or text changes. `typeaheadState` is an object with `left`, `top`, `text`, and `selectedIndex` properties - everything you need to know to render your typeahead. Typically you'd store the typeahead's state on your own component and use that in your component's `render()` method to position and display an overlay.
36+
37+
`handleTypeaheadReturn => (text, selectedIndex, selection)`:
38+
39+
This method is called when the typeahead's value is locked in by the user hitting return. This is where you'd autocomplete the selection and tag it with an entity, if wanted.
40+
41+
*Note that by default `draft-js-typeahead` does not help with filtering items in the typeahead based on the entered text, for a sample of how to do that please take a look at the mentions example.*
42+
1743
## License
1844

1945
MIT © [Justin Vaillancourt]()
2046

2147

2248
[npm-image]: https://badge.fury.io/js/draft-js-typeahead.svg
2349
[npm-url]: https://npmjs.org/package/draft-js-typeahead
24-
[daviddm-image]: https://david-dm.org/dooly-ai/draft-js-typeahead.svg?theme=shields.io
25-
[daviddm-url]: https://david-dm.org/dooly-ai/draft-js-typeahead

‎examples/mentions/mentions.html‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@
44
<meta charset="utf-8" />
55
<title>Draft Typeahead • Mentions</title>
66
</head>
7-
<body>
8-
<div id="target"></div>
7+
<body style="font-family: Helvetica, sans-serif">
8+
<div style="width: 600px; padding: 20px">
9+
<p>This is an example of mentions in Draft.js! Try entering an '@'.</p>
10+
<div id="target"></div>
11+
</div>
912
<script src="../../node_modules/es6-shim/es6-shim.js"></script>
1013
<script src="../../node_modules/babel-transform-in-browser/dist/btib.js"></script>
1114
<script src="../../node_modules/immutable/dist/immutable.js"></script>
@@ -121,16 +124,15 @@
121124
};
122125

123126
renderTypeahead() {
124-
const { typeaheadState } = this.state;
125-
if (typeaheadState === null) {
127+
if (this.state.typeaheadState === null) {
126128
return null;
127129
}
128-
return <Mentions {...typeaheadState} />;
130+
return <Mentions {...this.state.typeaheadState} />;
129131
}
130132

131133
render() {
132134
return (
133-
<div style={styles.root}>
135+
<div>
134136
{this.renderTypeahead()}
135137
<div style={styles.editor}>
136138
<TypeaheadEditor
@@ -146,11 +148,6 @@
146148
}
147149

148150
const styles = {
149-
root: {
150-
width: 600,
151-
padding: 20,
152-
fontFamily: 'Helvetica, sans-serif',
153-
},
154151
editor: {
155152
minHeight: 80,
156153
padding: 10,

‎examples/overlay/overlay.html‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@
44
<meta charset="utf-8" />
55
<title>Draft Typeahead • Overlay</title>
66
</head>
7-
<body>
8-
<div id="target"></div>
7+
<body style="font-family: Helvetica, sans-serif">
8+
<div style="width: 600px; padding: 20px">
9+
<p>This is an example of overlays in Draft.js! Try entering an '@'.</p>
10+
<div id="target"></div>
11+
</div>
912
<script src="../../node_modules/es6-shim/es6-shim.js"></script>
1013
<script src="../../node_modules/babel-transform-in-browser/dist/btib.js"></script>
1114
<script src="../../node_modules/immutable/dist/immutable.js"></script>
@@ -18,7 +21,7 @@
1821
const { Editor, EditorState } = Draft;
1922
const { TypeaheadEditor } = DraftTypeahead;
2023

21-
const Overlay = ({ left, top, text }) => {
24+
function Overlay({ left, top, text }) {
2225
const style = Object.assign({}, styles.typeahead, {
2326
position: 'absolute',
2427
left,
@@ -29,14 +32,14 @@
2932
A wild overlay appears!
3033
</div>
3134
);
32-
};
35+
}
3336

3437
class OverlayEditorExample extends React.Component {
3538
constructor() {
3639
super();
3740
this.state = {
3841
editorState: EditorState.createEmpty(),
39-
typeaheadState: null
42+
typeaheadState: null,
4043
};
4144
}
4245

@@ -48,45 +51,41 @@
4851
this.setState({ typeaheadState });
4952
};
5053

51-
renderTypeahead = () => {
52-
const { typeaheadState } = this.state;
53-
if (!typeaheadState) {
54+
renderTypeahead() {
55+
if (this.state.typeaheadState === null) {
5456
return null;
5557
}
56-
return <Overlay {...typeaheadState} />;
57-
};
58+
return <Overlay {...this.state.typeaheadState} />;
59+
}
5860

59-
render = () => (
60-
<div style={styles.root}>
61-
{this.renderTypeahead()}
62-
<div style={styles.editor}>
63-
<TypeaheadEditor
64-
editorState={this.state.editorState}
65-
onChange={this.onChange}
66-
onTypeaheadChange={this.onTypeaheadChange}
67-
/>
61+
render() {
62+
return (
63+
<div>
64+
{this.renderTypeahead()}
65+
<div style={styles.editor}>
66+
<TypeaheadEditor
67+
editorState={this.state.editorState}
68+
onChange={this.onChange}
69+
onTypeaheadChange={this.onTypeaheadChange}
70+
/>
71+
</div>
6872
</div>
69-
</div>
70-
);
73+
);
74+
}
7175
}
7276

7377
const styles = {
74-
root: {
75-
width: 600,
76-
padding: 20,
77-
fontFamily: 'Helvetica, sans-serif'
78-
},
7978
editor: {
8079
minHeight: 80,
8180
padding: 10,
82-
border: '1px solid #ccc'
81+
border: '1px solid #ccc',
8382
},
8483
typeahead: {
8584
padding: 10,
8685
background: 'ivory',
8786
border: '1px solid #ccc',
88-
borderRadius: 3
89-
}
87+
borderRadius: 3,
88+
},
9089
};
9190

9291
ReactDOM.render(

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"homepage": "",
66
"author": {
77
"name": "Justin Vaillancourt",
8-
"email": "justin@doolynoted.com",
8+
"email": "justin@dooly.ai",
99
"url": ""
1010
},
1111
"files": [

0 commit comments

Comments
 (0)