|
7 | 7 | ## Usage
|
8 | 8 |
|
9 | 9 | ```jsx
|
10 |
| -import React from 'react' |
11 |
| -import ReactDOM from 'react-dom' |
12 |
| - |
13 |
| -ReactDOM.render( |
14 |
| - <InputHints |
15 |
| - placeholders={[ |
16 |
| - 'Enter your username here...', |
17 |
| - 'Usernames can be 7-18 characters long.', |
18 |
| - ]} />, |
19 |
| - document.body |
| 10 | +<InputHints |
| 11 | + placeholders={[ |
| 12 | + 'Enter your username here...', |
| 13 | + 'Usernames can be 7-18 characters long.', |
| 14 | + ]} /> |
20 | 15 | )
|
21 | 16 | ```
|
22 | 17 |
|
23 |
| -## Component's ref API |
24 |
| - |
25 |
| -The component implements an API that makes it possible to interact with the DOM node itself. Use [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html)s to access these methods. |
26 |
| - |
27 |
| -### `focus()` |
28 |
| - |
29 |
| -Brings focus on the input element. |
30 |
| - |
31 |
| -### `blur()` |
32 |
| - |
33 |
| -Removes focus from the input element. |
34 |
| - |
35 | 18 | ## Installation
|
36 | 19 |
|
37 | 20 | ```sh
|
38 | 21 | $ npm install react-input-hints
|
| 22 | +# or |
| 23 | +$ yarn add react-input-hints |
39 | 24 | ```
|
40 | 25 |
|
41 | 26 | ## Props
|
42 | 27 |
|
43 |
| -### `placeholders` | `array` |
44 |
| - |
45 |
| -The placeholders to print out, in order of appearance. |
| 28 | +*See [react-typewriting](https://github.com/williamboman/react-typewriting#props) for more controls.* |
46 | 29 |
|
47 |
| -### `waitBeforeDeleteMs` | `number` | default: 2000 |
| 30 | +### `placeholders` | `Array<string>` | *required* |
48 | 31 |
|
49 |
| -Amount of milliseconds placeholders will be fully readable before starting |
50 |
| -to delete the placeholder. |
51 |
| - |
52 |
| -### `writeSpeedMs` | `number` | default: 100 |
53 |
| - |
54 |
| -The absolute slowest speed to wait between printing characters (characters are printed at random intervals that span from 0 ms to whatever this config value is set to). |
55 |
| - |
56 |
| -### `deleteSpeedMs` | `number` | default: 60 |
57 |
| - |
58 |
| -Same as `writeSpeedMs` (see above), but for when deleting characters. |
| 32 | +The placeholders to print out, in order of appearance. |
59 | 33 |
|
60 | 34 | ## Tips
|
61 | 35 |
|
62 | 36 | Use the [`selector:placeholder`](http://css-tricks.com/snippets/css/style-placeholder-text/) CSS pseudo-class to style your placeholders!
|
63 | 37 |
|
64 |
| -## Todos |
65 |
| - |
66 |
| -- Make it support arbitrary components via props. |
67 |
| - |
68 | 38 | ## License
|
69 | 39 |
|
70 | 40 | Licensed under the MIT license.
|
|
0 commit comments