{"id":19611257,"url":"https://github.com/binary-blazer/react-effectz","last_synced_at":"2025-04-27T22:33:21.737Z","repository":{"id":232469225,"uuid":"784400633","full_name":"binary-blazer/react-effectz","owner":"binary-blazer","description":"💭 react effects npm package including some effects in form as components","archived":false,"fork":false,"pushed_at":"2025-01-16T21:27:22.000Z","size":254,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-24T14:01:47.482Z","etag":null,"topics":["cjs","effectz","esm","library","nextjs","react","react-effectz","types","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-effectz","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/binary-blazer.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":"2024-04-09T19:21:07.000Z","updated_at":"2025-01-16T21:27:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"164af1fc-de39-4d45-9d37-59cd0fff3913","html_url":"https://github.com/binary-blazer/react-effectz","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"8b9c0c874cc9c722657e9e5b219749dd68801a82"},"previous_names":["binary-blazer/react-glitchy"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binary-blazer%2Freact-effectz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binary-blazer%2Freact-effectz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binary-blazer%2Freact-effectz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binary-blazer%2Freact-effectz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/binary-blazer","download_url":"https://codeload.github.com/binary-blazer/react-effectz/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251219600,"owners_count":21554444,"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":["cjs","effectz","esm","library","nextjs","react","react-effectz","types","typescript"],"created_at":"2024-11-11T10:37:43.916Z","updated_at":"2025-04-27T22:33:21.730Z","avatar_url":"https://github.com/binary-blazer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-effectz\n\n\u003e 💭 react effects npm package including some effects in form as components\n\n## 📋 Requirements\n\n- React 18.2.0 or later\n- Node.js 18.0.0 or later\n- (for Next.js) Next.js 13.0.0 or later\n\n## 📦 Installation\n\n```bash\nnpm install react-effectz\n# or\nyarn add react-effectz\n# or\npnpm add react-effectz\n# or\nbun add react-effectz\n```\n\n## 📚 Usage\n\n```jsx\nimport { GlitchText, FadeInText, BounceText } from \"react-effectz\";\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cGlitchText text=\"Hello, World!\" className=\"text-xl\" playOnLoop={false} /\u003e\n      \u003cFadeInText text=\"Welcome to React!\" className=\"text-xl\" playOnLoop={true} /\u003e\n      \u003cBounceText text=\"Let's bounce!\" className=\"text-xl\" playOnLoop={true} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## 📖 Documentation\n\n- [GlitchText](#glitchtext)\n- [FadeInText](#fadeintext)\n- [BounceText](#bouncetext)\n  \u003e Rest will be available soon\n\n### GlitchText\n\n```jsx\nimport { GlitchText } from \"react-effectz\";\n\nconst App = () =\u003e {\n  return (\n    \u003cGlitchText text=\"Hello, World!\" className=\"text-xl\" playOnLoop={true} /\u003e\n  );\n};\n```\n\n#### Props\n\n- `text` (string): Text to apply glitch effect on\n- `className` (string): Classname to apply on the text\n- `playOnLoop` (boolean): Play the glitch effect on loop\n- `duration` (number): Duration of the glitch effect \u003c(soon)\u003e\n\n### FadeInText\n\n```jsx\nimport { FadeInText } from \"react-effectz\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFadeInText text=\"Welcome to React!\" className=\"text-xl\" playOnLoop={true} /\u003e\n  );\n};\n```\n\n#### Props\n\n- `text` (string): Text to apply fade-in effect on\n- `className` (string): Classname to apply on the text\n- `playOnLoop` (boolean): Play the fade-in effect on loop\n- `style` (object): Inline styles to apply to the text\n\n### BounceText\n\n```jsx\nimport { BounceText } from \"react-effectz\";\n\nconst App = () =\u003e {\n  return (\n    \u003cBounceText text=\"Let's bounce!\" className=\"text-xl\" playOnLoop={true} /\u003e\n  );\n};\n```\n\n#### Props\n\n- `text` (string): Text to apply bounce effect on\n- `className` (string): Classname to apply on the text\n- `playOnLoop` (boolean): Play the bounce effect on loop\n- `style` (object): Inline styles to apply to the text\n\n## 📚 Examples\n\nYou can find examples on how to use the (currently only GlitchText) in the [examples](./examples)\n\n## 📜 License\n\nApache-2.0 License © [Jonas Franke \u003c@binary-blazer\u003e](https://github.com/binary-blazer/react-effectz/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinary-blazer%2Freact-effectz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinary-blazer%2Freact-effectz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinary-blazer%2Freact-effectz/lists"}