{"id":22269121,"url":"https://github.com/jason89521/react-typist-component","last_synced_at":"2025-07-28T12:31:43.191Z","repository":{"id":37827168,"uuid":"494484340","full_name":"jason89521/react-typist-component","owner":"jason89521","description":"A react component to mimic typewriter effect","archived":false,"fork":false,"pushed_at":"2024-10-08T00:29:25.000Z","size":2003,"stargazers_count":27,"open_issues_count":8,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-12T19:28:47.777Z","etag":null,"topics":["react","react-component","react-components","reactjs","typewriter","typist"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jason89521.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-20T13:54:36.000Z","updated_at":"2024-10-08T00:28:08.000Z","dependencies_parsed_at":"2024-02-27T02:43:54.349Z","dependency_job_id":"0aa687bd-846d-4561-9af8-d25c3fed7be1","html_url":"https://github.com/jason89521/react-typist-component","commit_stats":null,"previous_names":["jason89521/react-typer-component","jason89521/react-typist-component","jason89521/react-components-monorepo"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason89521%2Freact-typist-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason89521%2Freact-typist-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason89521%2Freact-typist-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jason89521%2Freact-typist-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jason89521","download_url":"https://codeload.github.com/jason89521/react-typist-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227905495,"owners_count":17837906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-component","react-components","reactjs","typewriter","typist"],"created_at":"2024-12-03T11:15:10.238Z","updated_at":"2024-12-03T11:15:10.865Z","avatar_url":"https://github.com/jason89521.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Typist Component\n\nCreate typewriter effect by setting up a component's children directly.\n\n## Install\n\n```bash\nnpm install react-typist-component\n# or\nyarn add react-typist-component\n```\n\n## Example\n\n```jsx\nimport Typist from 'react-typist-component';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cTypist typingDelay={100} cursor={\u003cspan className='cursor'\u003e|\u003c/span\u003e}\u003e\n      This is a typo\n      \u003cbr /\u003e\n      \u003cTypist.Backspace count={5} /\u003e\n      \u003cTypist.Delay ms={1500} /\u003e\n      react component\n      \u003cTypist.Paste\u003e\n        \u003cdiv\u003e\n          use\n          \u003cdiv\u003edeeper div\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/Typist.Paste\u003e\n    \u003c/Typist\u003e\n  );\n};\n```\n\n## API reference\n\n### `Typist`\n\n```ts\nexport type Delay = number | (() =\u003e number);\nexport type Splitter = (str: string) =\u003e string[];\nexport type TypistProps = {\n  children: React.ReactNode;\n  typingDelay?: Delay;\n  backspaceDelay?: Delay;\n  loop?: boolean;\n  pause?: boolean;\n  startDelay?: number;\n  finishDelay?: number;\n  onTypingDone?: () =\u003e void;\n  splitter?: Splitter;\n  cursor?: string | React.ReactElement;\n  disabled?: boolean;\n  restartKey?: any;\n  hideCursorWhenDone?: boolean;\n};\n```\n\n#### `children`\n\nThe contents that will be rendered with typewriter effect. It accepts nested elements, so you can easily style your contents.\n\nNote that `Typist` treats the element whose children is `null` or `undefined` as a single token. For example:\n\n```jsx\nconst Foo = () =\u003e {\n  return \u003cdiv\u003eFoo\u003c/div\u003e;\n};\n\n// The text \"Foo\" will be displayed after \"123\" immediately instead of displayed seperately\nconst App = () =\u003e {\n  return (\n    \u003cTypist\u003e\n      123\n      \u003cFoo /\u003e\n    \u003c/Typist\u003e\n  );\n};\n```\n\n#### `typingDelay`\n\n**Default**: `75`\n\nThe 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.\n\n#### `backspaceDelay`\n\n**Default**: `typingDelay`\n\nThe 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.\n\n#### `loop`\n\n**Default**: `false`\n\n`Typist` will automatically restart the typing animation if this value is `true`.\n\n#### `pause`\n\n**Default**: `false`\n\nSet to `true` if you want to pause the typing animation.\n\n#### `startDelay`\n\n**Default**: `0`\n\n`Typist` will wait for this delay before starting the typing animation.\n\n#### `finishDelay`\n\n**Default**: `0`\n\n`Typist` will wait for this delay after finishing the typing animation.\n\n#### `onTypingDone`\n\nThis function will be called when the typing animation finishes. It will be called before waiting for the timeout with `finishDelay`.\n\n#### `splitter`\n\n**Default**: `(str: string) =\u003e str.split('')`\n\n`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.\n\n```tsx\nimport GraphemeSplitter from 'grapheme-splitter';\n\nconst splitter = (str: string) =\u003e {\n  return new GraphemeSplitter().splitGraphemes(str);\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cTypist splitter={splitter}\u003e\n      😎🗑🥵⚠😀👍✌👨‍👨‍👧‍👦📏💡🚀🎂😓🎈💕😘\n      \u003cTypist.Backspace count={16} /\u003e\n    \u003c/Typist\u003e\n  );\n};\n```\n\n#### `cursor`\n\nWill be inserted after the last typed token.\n\n#### `disabled`\n\n**Default**: `false`\n\nIf 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.\n\n#### `restartKey`\n\n`Typist` will restart the typing animation whenever `restartKey` changes.\n\n#### `hideCursorWhenDone`\n\nHide the cursor when the typing animation is done.\n\n### `Typist.Backspace`\n\n```ts\ntype Props = {\n  count: number;\n};\n```\n\n#### `count`\n\nThe number of tokens that will be backspaced.\n\n### `Typist.Delay`\n\n```ts\ntype Props = {\n  ms: number;\n};\n```\n\n#### `ms`\n\nThe duration of the delay in milliseconds.\n\n### `Typist.Paste`\n\n```ts\ntype Props = {\n  children: React.ReactNode;\n};\n```\n\n#### `children`\n\nChildren inside this component will be pasted without typewriter effect. Do not wrap another `Paste` inside this component, otherwise `Typist` will produce weird behavior.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjason89521%2Freact-typist-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjason89521%2Freact-typist-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjason89521%2Freact-typist-component/lists"}