|
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