{"id":28089284,"url":"https://github.com/enesusta/react-ityped","last_synced_at":"2025-08-11T21:45:03.093Z","repository":{"id":65484769,"uuid":"287532153","full_name":"enesusta/react-ityped","owner":"enesusta","description":"react-ityped is a react component that wraps https://www.npmjs.com/package/ityped package","archived":false,"fork":false,"pushed_at":"2024-02-01T06:01:16.000Z","size":164,"stargazers_count":4,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-21T08:12:01.756Z","etag":null,"topics":["ityped","react","react-component-library"],"latest_commit_sha":null,"homepage":"https://ityped.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enesusta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2020-08-14T12:51:41.000Z","updated_at":"2022-07-24T20:34:48.000Z","dependencies_parsed_at":"2025-05-13T12:56:00.794Z","dependency_job_id":"51d36ee0-328c-406a-bb30-062f7d80524a","html_url":"https://github.com/enesusta/react-ityped","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/enesusta/react-ityped","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesusta%2Freact-ityped","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesusta%2Freact-ityped/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesusta%2Freact-ityped/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesusta%2Freact-ityped/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enesusta","download_url":"https://codeload.github.com/enesusta/react-ityped/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesusta%2Freact-ityped/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269963116,"owners_count":24504298,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ityped","react","react-component-library"],"created_at":"2025-05-13T12:55:58.741Z","updated_at":"2025-08-11T21:45:03.052Z","avatar_url":"https://github.com/enesusta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e \n\n`react-ityped` is a react component that wraps https://www.npmjs.com/package/ityped package\n\n![npm](https://img.shields.io/npm/v/react-ityped?color=pink\u0026style=for-the-badge)\n[![CodeFactor](https://www.codefactor.io/repository/github/enesusta/react-ityped/badge?style=for-the-badge)](https://www.codefactor.io/repository/github/enesusta/react-ityped)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-ityped?color=orange\u0026style=for-the-badge)\n![NPM](https://img.shields.io/npm/l/kanca?color=blue\u0026style=for-the-badge)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=for-the-badge\u0026color=black)](https://standardjs.com)\n\n\u003c/div\u003e\n\n\n\n## 🕺 Install\n\nby using `npm`:\n```bash\n$ npm i react-ityped \n```\n\nby using `yarn`:\n\n```bash\n$ yarn add react-ityped\n```\n\n## ⚜️ How does react-ityped looks like?\n\n\u003cbr/\u003e\n\n![](https://raw.githubusercontent.com/enesusta/assets-host-for-github-pages/assets/ityped/react-ityped-1.gif)\n\n\n\n## ☕️ Features\n\nOriginal ityped package already has support for React applications. But it uses DOM directly with html-id.\n\nThis situation might be appropriate for react applications `that doesn't use Reach Hook API.` But if you're using react **v16.8 or higher**, you should use `useRef` hook instead of direct DOM access.\n\nWhat do I mean?\n\n\u003e This example has taken from ityped package.\n\nIf you want to check. [link](https://github.com/luisvinicius167/ityped#use-with-reactjs)\n\n```jsx\nimport React, { Component } from 'react'\nimport { init } from 'ityped'\n\nexport default class Hello extends Component {\n    componentDidMount() {\n        const myElement = document.querySelector('#myElement')\n        init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!'] })\n    }\n    render() {\n        return \u003cdiv id=\"myElement\"\u003e\u003c/div\u003e\n    }\n}\n```\n\nWith `useRef()` hook, we don't require to specify any id on our component. `useRef()` hook does it for us.\n\nIn this regards `react-ityped` uses **useRef()** hook to access native DOM element.\n\n## 🎆 Example\n\n```jsx\nimport React from 'react';\nimport ITyped from 'react-ityped';\nimport './index.css';\n\nconst Example = () =\u003e {\n\n    const strings = ['react-ityped', 'is a', 'react component', 'that wraps npm ityped package.']\n\n    return (\n        \u003cITyped className='container ityped-cursor'\n            showCursor={false}\n            strings={strings}\n            typeSpeed={50}\n            backSpeed={50}\n            startDelay={100}\n            backDelay={250}\n        /\u003e\n    );\n}\n\nexport default Example;\n```\n\nIf you want to check more detail about styling, check that [link](https://github.com/luisvinicius167/ityped#css)\n\n```css\n// index.\n.ityped-cursor {\n    font-size: 2.2rem;\n    opacity: 1;\n    -webkit-animation: blink 0.3s infinite;\n    -moz-animation: blink 0.3s infinite;\n    animation: blink 0.3s infinite;\n    animation-direction: alternate;\n}\n\n@keyframes blink {\n    100% {\n        opacity: 0;\n    }\n}\n\n@-webkit-keyframes blink {\n    100% {\n        opacity: 0;\n    }\n}\n\n@-moz-keyframes blink {\n    100% {\n        opacity: 0;\n    }\n}\n\n.container {\n    text-align: left;\n    font-size: 25px;\n    align-self: center;\n    margin-left: 3%;\n    margin-top: 3%;\n}\n```\n\n\n\n## 🔧 Props\n\nCommon props you may want to specify include:\n\n\n| Name | Type | Discription | Default |\n| :--: | :--: | :--: | :--: |\n| strings | string[] | An array with the strings that will be animated | `['Put your strings here...', 'and Enjoy!']`\n| cursorChar | string | Character for cursor | `\"|\"`|\n| typeSpeed | number | Type speed in milliseconds | 100 |\n| backSpeed | number | Type back speed in milliseconds | 50 |\n| startDelay | number | Time before typing starts | 50 |\n| backDelay | number | Time before backspacing | 500 |\n| loop | boolean | The animation loop | false |\n| showCursor | boolean | Show the cursor element | true |\n| disableBackTyping | boolean | Disable back typing for the last string sentence | false |\n\n\u003cbr/\u003e\n\nSee the [props documentation](https://github.com/luisvinicius167/ityped#customization) for complete documentation on the props that `react-ityped` supports.\n\n\n\n## 📦 Build \n\n- [Rollup](https://rollupjs.org/) for build process\n- [Babel](https://babeljs.io/) for transpilation\n\n\n## 📜 License\n\nMIT © [Enes Usta](https://github.com/enesusta)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenesusta%2Freact-ityped","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenesusta%2Freact-ityped","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenesusta%2Freact-ityped/lists"}