{"id":19511155,"url":"https://github.com/littlee/react-shuffle-text","last_synced_at":"2025-05-07T08:41:31.580Z","repository":{"id":32729567,"uuid":"140827959","full_name":"littlee/react-shuffle-text","owner":"littlee","description":"React component that apply shuffle animation to text","archived":false,"fork":false,"pushed_at":"2023-01-25T20:06:36.000Z","size":1943,"stargazers_count":2,"open_issues_count":25,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T08:12:23.457Z","etag":null,"topics":["animation","react","react-component"],"latest_commit_sha":null,"homepage":null,"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/littlee.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}},"created_at":"2018-07-13T09:37:37.000Z","updated_at":"2024-02-23T03:23:46.000Z","dependencies_parsed_at":"2023-02-14T10:55:17.622Z","dependency_job_id":null,"html_url":"https://github.com/littlee/react-shuffle-text","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/littlee%2Freact-shuffle-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/littlee%2Freact-shuffle-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/littlee%2Freact-shuffle-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/littlee%2Freact-shuffle-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/littlee","download_url":"https://codeload.github.com/littlee/react-shuffle-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252844797,"owners_count":21813123,"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":["animation","react","react-component"],"created_at":"2024-11-10T23:19:36.764Z","updated_at":"2025-05-07T08:41:31.561Z","avatar_url":"https://github.com/littlee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Shuffle Text\n\n![Preview](https://github.com/littlee/react-shuffle-text/blob/master/demo/preview.gif?raw=true)\n\n## Basic Usage\ninstall:\n```\nnpm install -S react-shuffle-text\n```\n\nrender:\n```js\nimport ShuffleText from 'react-shuffle-text';\n\n\n// somewhere in render function\n\u003cShuffleText content=\"Zhuangbility\" /\u003e\n\n```\n\ncustom styles \u0026 effects:\n```css\n/* write styles for .shuffle-text-char with higher specificity */\n.my-shuffle .shuffle-text-char {\n  animation: 0.5s ease-in-out both myWordEnter; /* none for no effect */\n}\n\n@keyframes myWordEnter {\n  0% {\n    opacity: 0;\n    transform: translate(-100%, 0) scale(5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n  }\n}\n```\n\n## Available Props\n- content: PropTypes.string.isRequired\n  - text wanted to display\n\n- charIncInterval: PropTypes.number (default: 100)\n  - character increasing time interval \n\n- charFrames: PropTypes.number (default: 10)\n  - frame counts that each character plays\n\n- charFrameTime: PropTypes.number (default: 50)\n  - duration of each character frame\n\n- more props are coming","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flittlee%2Freact-shuffle-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flittlee%2Freact-shuffle-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flittlee%2Freact-shuffle-text/lists"}