You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The contents that will be rendered with typewriter effect. It accepts nested elements, so you can easily style your contents.
67
+
68
+
Note that `Typist` treats the element whose children is `null` or `undefined` as a single token. For example:
69
+
70
+
```jsx
71
+
constFoo= () => {
72
+
return<div>Foo</div>;
73
+
};
74
+
75
+
// The text "Foo" will be displayed after "123" immediately instead of displayed seperately
76
+
constApp= () => {
77
+
return (
78
+
<Typist>
79
+
123
80
+
<Foo />
81
+
</Typist>
82
+
);
83
+
};
84
+
```
85
+
86
+
#### `typingDelay`
87
+
88
+
**Default**: `75`
89
+
90
+
The delay after typing a token. If you pass in a function, `Typist` will call the function after typing a token and use the return value as the delay.
91
+
92
+
#### `backspaceDelay`
93
+
94
+
**Default**: `typingDelay`
95
+
96
+
The delay after backspacing a token. If you pass in a function, `Typist` will call the function after backspacing a token and use the return value as the delay.
97
+
98
+
#### `loop`
99
+
100
+
**Default**: `false`
101
+
102
+
`Typist` will automatically restart the typing animation if this value is `true`.
103
+
104
+
#### `pause`
105
+
106
+
**Default**: `false`
107
+
108
+
Set to `true` if you want to pause the typing animation.
109
+
110
+
#### `startDelay`
111
+
112
+
**Default**: `0`
113
+
114
+
`Typist` will wait for this delay before starting the typing animation.
115
+
116
+
#### `finishDelay`
117
+
118
+
**Default**: `0`
119
+
120
+
`Typist` will wait for this delay after finishing the typing animation.
121
+
122
+
#### `onTypingDone`
123
+
124
+
This function will be called when the typing animation finishes. It will be called before waiting for the timeout with `finishDelay`.
125
+
126
+
#### `splitter`
127
+
128
+
**Default**: `(str: string) => str.split('')`
129
+
130
+
`Typist` will use this function to get tokens from strings. It may be useful when you want to split your string in different way. For example, you can use [grapheme-splitter](https://github.com/orling/grapheme-splitter) to split string if your string contains emoji.
131
+
132
+
```tsx
133
+
importGraphemeSplitterfrom'grapheme-splitter';
134
+
135
+
const splitter = (str:string) => {
136
+
returnnewGraphemeSplitter().splitGraphemes(str);
137
+
};
138
+
139
+
const App = () => {
140
+
return (
141
+
<Typistsplitter={splitter}>
142
+
😎🗑🥵⚠😀👍✌👨👨👧👦📏💡🚀🎂😓🎈💕😘
143
+
<Typist.Backspacecount={16} />
144
+
</Typist>
145
+
);
146
+
};
147
+
```
148
+
149
+
#### `cursor`
150
+
151
+
Will be inserted after the last typed token.
152
+
153
+
#### `disabled`
154
+
155
+
**Default**: `false`
156
+
157
+
If this value is `true`, the result will be displayed immediately without typing animation. It can be useful when you want to display the final result if a user has visited the typing animation.
158
+
159
+
#### `restartKey`
160
+
161
+
`Typist` will restart the typing animation whenever `restartKey` changes.
162
+
163
+
### `Typist.Backspace`
164
+
165
+
```ts
166
+
typeProps= {
167
+
count:number;
168
+
};
169
+
```
170
+
171
+
#### `count`
172
+
173
+
The number of tokens that will be backspaced.
174
+
175
+
### `Typist.Delay`
176
+
177
+
```ts
178
+
typeProps= {
179
+
ms:number;
180
+
};
181
+
```
182
+
183
+
#### `ms`
184
+
185
+
The duration of the delay in milliseconds.
186
+
187
+
### `Typist.Paste`
188
+
189
+
```ts
190
+
typeProps= {
191
+
children:React.ReactNode;
192
+
};
193
+
```
194
+
195
+
#### `children`
196
+
197
+
Children inside this component will be pasted without typewriter effect. Do not wrap another `Paste` inside this component, otherwise `Typist` will produce weird behavior.
0 commit comments