Skip to content

Commit bd70f0d

Browse files
jason89521jason89521
committed
chore: publish react-typist-component@1.0.5
1 parent dfb8ffb commit bd70f0d

5 files changed

Lines changed: 197 additions & 194 deletions

File tree

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
git-checks=false

‎README.md‎

Lines changed: 2 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,3 @@
1-
# React Typist Component
1+
# React Components Monorepo
22

3-
Create typewriter effect by setting up a component's children directly.
4-
5-
## Install
6-
7-
```bash
8-
npm install react-typist-component
9-
# or
10-
yarn add react-typist-component
11-
```
12-
13-
## Example
14-
15-
```jsx
16-
import Typist from 'react-typist-component';
17-
18-
const MyComponent = () => {
19-
return (
20-
<Typist typingDelay={100} cursor={<span className='cursor'>|</span>}>
21-
This is a typo
22-
<br />
23-
<Typist.Backspace count={5} />
24-
<Typist.Delay ms={1500} />
25-
react component
26-
<Typist.Paste>
27-
<div>
28-
use
29-
<div>deeper div</div>
30-
</div>
31-
</Typist.Paste>
32-
</Typist>
33-
);
34-
};
35-
```
36-
37-
## API reference
38-
39-
### `Typist`
40-
41-
```ts
42-
export type Delay = number | (() => number);
43-
export type Splitter = (str: string) => string[];
44-
export type TypistProps = {
45-
children: React.ReactNode;
46-
typingDelay?: Delay;
47-
backspaceDelay?: Delay;
48-
loop?: boolean;
49-
pause?: boolean;
50-
startDelay?: number;
51-
finishDelay?: number;
52-
onTypingDone?: () => void;
53-
splitter?: Splitter;
54-
cursor?: string | React.ReactElement;
55-
disabled?: boolean;
56-
restartKey?: any;
57-
};
58-
```
59-
60-
#### `children`
61-
62-
The contents that will be rendered with typewriter effect. It accepts nested elements, so you can easily style your contents.
63-
64-
Note that `Typist` treats the element whose children is `null` or `undefined` as a single token. For example:
65-
66-
```jsx
67-
const Foo = () => {
68-
return <div>Foo</div>;
69-
};
70-
71-
// The text "Foo" will be displayed after "123" immediately instead of displayed seperately
72-
const App = () => {
73-
return (
74-
<Typist>
75-
123
76-
<Foo />
77-
</Typist>
78-
);
79-
};
80-
```
81-
82-
#### `typingDelay`
83-
84-
**Default**: `75`
85-
86-
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.
87-
88-
#### `backspaceDelay`
89-
90-
**Default**: `typingDelay`
91-
92-
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.
93-
94-
#### `loop`
95-
96-
**Default**: `false`
97-
98-
`Typist` will automatically restart the typing animation if this value is `true`.
99-
100-
#### `pause`
101-
102-
**Default**: `false`
103-
104-
Set to `true` if you want to pause the typing animation.
105-
106-
#### `startDelay`
107-
108-
**Default**: `0`
109-
110-
`Typist` will wait for this delay before starting the typing animation.
111-
112-
#### `finishDelay`
113-
114-
**Default**: `0`
115-
116-
`Typist` will wait for this delay after finishing the typing animation.
117-
118-
#### `onTypingDone`
119-
120-
This function will be called when the typing animation finishes. It will be called before waiting for the timeout with `finishDelay`.
121-
122-
#### `splitter`
123-
124-
**Default**: `(str: string) => str.split('')`
125-
126-
`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.
127-
128-
```tsx
129-
import GraphemeSplitter from 'grapheme-splitter';
130-
131-
const splitter = (str: string) => {
132-
return new GraphemeSplitter().splitGraphemes(str);
133-
};
134-
135-
const App = () => {
136-
return (
137-
<Typist splitter={splitter}>
138-
😎🗑🥵⚠😀👍✌👨‍👨‍👧‍👦📏💡🚀🎂😓🎈💕😘
139-
<Typist.Backspace count={16} />
140-
</Typist>
141-
);
142-
};
143-
```
144-
145-
#### `cursor`
146-
147-
Will be inserted after the last typed token.
148-
149-
#### `disabled`
150-
151-
**Default**: `false`
152-
153-
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.
154-
155-
#### `restartKey`
156-
157-
`Typist` will restart the typing animation whenever `restartKey` changes.
158-
159-
### `Typist.Backspace`
160-
161-
```ts
162-
type Props = {
163-
count: number;
164-
};
165-
```
166-
167-
#### `count`
168-
169-
The number of tokens that will be backspaced.
170-
171-
### `Typist.Delay`
172-
173-
```ts
174-
type Props = {
175-
ms: number;
176-
};
177-
```
178-
179-
#### `ms`
180-
181-
The duration of the delay in milliseconds.
182-
183-
### `Typist.Paste`
184-
185-
```ts
186-
type Props = {
187-
children: React.ReactNode;
188-
};
189-
```
190-
191-
#### `children`
192-
193-
Children inside this component will be pasted without typewriter effect. Do not wrap another `Paste` inside this component, otherwise `Typist` will produce weird behavior.
3+
- [react-typist-component](./packages/react-typist-component/README.md)

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"name": "react-components-monorepo",
3-
"version": "1.0.4",
43
"author": "Yu-Xuan Zheng",
54
"keywords": [
65
"react components"

‎packages/react-typist-component/README.md‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
# React Typist Component
2+
3+
Create typewriter effect by setting up a component's children directly.
4+
5+
## Install
6+
7+
```bash
8+
npm install react-typist-component
9+
# or
10+
yarn add react-typist-component
11+
```
12+
13+
## Example
14+
15+
```jsx
16+
import Typist from 'react-typist-component';
17+
18+
const MyComponent = () => {
19+
return (
20+
<Typist typingDelay={100} cursor={<span className='cursor'>|</span>}>
21+
This is a typo
22+
<br />
23+
<Typist.Backspace count={5} />
24+
<Typist.Delay ms={1500} />
25+
react component
26+
<Typist.Paste>
27+
<div>
28+
use
29+
<div>deeper div</div>
30+
</div>
31+
</Typist.Paste>
32+
</Typist>
33+
);
34+
};
35+
```
36+
37+
## API reference
38+
39+
### `Typist`
40+
41+
```ts
42+
export type Delay = number | (() => number);
43+
export type Splitter = (str: string) => string[];
44+
export type TypistProps = {
45+
children: React.ReactNode;
46+
typingDelay?: Delay;
47+
backspaceDelay?: Delay;
48+
loop?: boolean;
49+
pause?: boolean;
50+
startDelay?: number;
51+
finishDelay?: number;
52+
onTypingDone?: () => void;
53+
splitter?: Splitter;
54+
cursor?: string | React.ReactElement;
55+
disabled?: boolean;
56+
restartKey?: any;
57+
};
58+
```
59+
60+
#### `children`
61+
62+
The contents that will be rendered with typewriter effect. It accepts nested elements, so you can easily style your contents.
63+
64+
Note that `Typist` treats the element whose children is `null` or `undefined` as a single token. For example:
65+
66+
```jsx
67+
const Foo = () => {
68+
return <div>Foo</div>;
69+
};
70+
71+
// The text "Foo" will be displayed after "123" immediately instead of displayed seperately
72+
const App = () => {
73+
return (
74+
<Typist>
75+
123
76+
<Foo />
77+
</Typist>
78+
);
79+
};
80+
```
81+
82+
#### `typingDelay`
83+
84+
**Default**: `75`
85+
86+
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.
87+
88+
#### `backspaceDelay`
89+
90+
**Default**: `typingDelay`
91+
92+
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.
93+
94+
#### `loop`
95+
96+
**Default**: `false`
97+
98+
`Typist` will automatically restart the typing animation if this value is `true`.
99+
100+
#### `pause`
101+
102+
**Default**: `false`
103+
104+
Set to `true` if you want to pause the typing animation.
105+
106+
#### `startDelay`
107+
108+
**Default**: `0`
109+
110+
`Typist` will wait for this delay before starting the typing animation.
111+
112+
#### `finishDelay`
113+
114+
**Default**: `0`
115+
116+
`Typist` will wait for this delay after finishing the typing animation.
117+
118+
#### `onTypingDone`
119+
120+
This function will be called when the typing animation finishes. It will be called before waiting for the timeout with `finishDelay`.
121+
122+
#### `splitter`
123+
124+
**Default**: `(str: string) => str.split('')`
125+
126+
`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.
127+
128+
```tsx
129+
import GraphemeSplitter from 'grapheme-splitter';
130+
131+
const splitter = (str: string) => {
132+
return new GraphemeSplitter().splitGraphemes(str);
133+
};
134+
135+
const App = () => {
136+
return (
137+
<Typist splitter={splitter}>
138+
😎🗑🥵⚠😀👍✌👨‍👨‍👧‍👦📏💡🚀🎂😓🎈💕😘
139+
<Typist.Backspace count={16} />
140+
</Typist>
141+
);
142+
};
143+
```
144+
145+
#### `cursor`
146+
147+
Will be inserted after the last typed token.
148+
149+
#### `disabled`
150+
151+
**Default**: `false`
152+
153+
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.
154+
155+
#### `restartKey`
156+
157+
`Typist` will restart the typing animation whenever `restartKey` changes.
158+
159+
### `Typist.Backspace`
160+
161+
```ts
162+
type Props = {
163+
count: number;
164+
};
165+
```
166+
167+
#### `count`
168+
169+
The number of tokens that will be backspaced.
170+
171+
### `Typist.Delay`
172+
173+
```ts
174+
type Props = {
175+
ms: number;
176+
};
177+
```
178+
179+
#### `ms`
180+
181+
The duration of the delay in milliseconds.
182+
183+
### `Typist.Paste`
184+
185+
```ts
186+
type Props = {
187+
children: React.ReactNode;
188+
};
189+
```
190+
191+
#### `children`
192+
193+
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

Comments
 (0)