{"id":20875603,"url":"https://github.com/ivan-corporation/easter-break","last_synced_at":"2025-05-12T15:31:43.008Z","repository":{"id":45778956,"uuid":"500459060","full_name":"Ivan-Corporation/Easter-break","owner":"Ivan-Corporation","description":"Ideal package for some easter egg in your site. He just give you onClick function with canvas destroying current page ☠️","archived":false,"fork":false,"pushed_at":"2023-03-20T01:57:27.000Z","size":2489,"stargazers_count":52,"open_issues_count":12,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-10T18:03:17.718Z","etag":null,"topics":["canvas","easter-break","easter-egg","funny","javascript","nextjs","npm-package","physics","react","typescript","vannila-js","vue","webpack"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/easter-break-y8o6t4","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/Ivan-Corporation.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-06-06T14:08:56.000Z","updated_at":"2024-09-03T20:47:39.000Z","dependencies_parsed_at":"2024-10-31T05:32:32.626Z","dependency_job_id":"4fcdb96d-1bb3-4ffa-b4db-944c20cb2b05","html_url":"https://github.com/Ivan-Corporation/Easter-break","commit_stats":{"total_commits":25,"total_committers":3,"mean_commits":8.333333333333334,"dds":0.4,"last_synced_commit":"1127ccf867259fade4a2194c23aabdfe72ab1efc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ivan-Corporation%2FEaster-break","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ivan-Corporation%2FEaster-break/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ivan-Corporation%2FEaster-break/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ivan-Corporation%2FEaster-break/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ivan-Corporation","download_url":"https://codeload.github.com/Ivan-Corporation/Easter-break/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225140822,"owners_count":17427173,"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":["canvas","easter-break","easter-egg","funny","javascript","nextjs","npm-package","physics","react","typescript","vannila-js","vue","webpack"],"created_at":"2024-11-18T06:47:20.096Z","updated_at":"2024-11-18T06:47:20.712Z","avatar_url":"https://github.com/Ivan-Corporation.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM](https://img.shields.io/npm/v/easter-break.svg)](https://www.npmjs.com/package/easter-break)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n![NPM](https://img.shields.io/npm/l/easter-break)\n![npm](https://img.shields.io/npm/dm/easter-break)\n![GitHub stars](https://img.shields.io/github/stars/Ivan-Corporation/easter-break?style=social)\n\n# Easter break \u003cimg src='./egg_logo.png' width='30'/\u003e\n### Ideal package for some easter egg in your site. This package just give you ``onClick function`` with canvas destroying current page\n\n\n\u003cbr/\u003e\n\n# Examples\n\n\nhttps://user-images.githubusercontent.com/58357980/172224333-ab09a58b-5e78-4b68-90cc-16bdb07318a1.mp4\n\n\n## Komotedly - NextJS\n### Check here (button on the opened left menu): https://komotedly.netlify.app/\n![image](https://user-images.githubusercontent.com/58357980/172209922-ab5ee04a-dc53-4be7-ba91-20c245a4b198.png)\n\n\n## Vue boilerplate\n![image](https://user-images.githubusercontent.com/58357980/172308331-1208b07f-6c33-4075-bbca-f27810abc1b8.png)\n\n\n## Codesandbox\n\u003cimg src='./1.png'/\u003e\n\n### Or check codesandbox - https://codesandbox.io/s/easter-break-y8o6t4?file=/src/App.tsx\n\n# Installation\n\n## Write in terminal of your workspace:\n\n```bash\nnpm i easter-break\n```\nor\n\n```bash\nyarn add easter-break\n```\n\n\n# Usage\n\n`Note: Button is fully customizable because this package it's just onClick function with Canvas support`\n\n## React\n\u003cp align='right'\u003e\n \u003cimg src=https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg alt=react width=\"40\" height=\"40\" /\u003e\n\u003c/p\u003e\n\n```ts\n//  EasterBreaker.tsx\nimport easterBreaker from \"easter-break\";\n\n const EasterBraker = () =\u003e {\n    return (\n        \u003cbutton onClick={easterBreaker}\u003eBreak me \u003c/button\u003e\n\n    );\n  };\n  export default EasterBraker\n```\n\n``` ts\n// App.tsx\nimport EasterBreaker from './EasterBreaker'\n\nfunction App() {\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n        ...\n        \u003cEasterBreaker/\u003e\n        ...\n    \u003c/div\u003e\n```\n\nFull example - https://github.com/Ivan-Corporation/Easter-break/tree/master/examples/react\n\u003chr/\u003e\n\n## Vue 3\n\u003cp align='right'\u003e\n \u003cimg src=https://raw.githubusercontent.com/Ivan-Corporation/Ivan-Corporation/718ecb135ee0649ab8e9c453db344d581a782de3/icons/vue.svg alt=react width=\"40\" height=\"40\"/\u003e\n \u003c/p\u003e\n\n```vue\n// EasterBreaker.vue\n\u003ctemplate\u003e\n   \u003cdiv class=\"button\" @click=\"destroy\" \u003e\n     Break me\n   \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript \u003e\nimport easterBreaker from 'easter-break'\n\n\nexport default {\n  name: 'easter-breaker',\n   methods: {\n    destroy(){\n      easterBreaker();\n    }\n}\n}\n\n\u003c/script\u003e\n```\n\n``` vue \n// HelloWorld.vue\n\u003ctemplate\u003e\n  ...\n    \u003cbutton\u003e\n      \u003ceaster-breaker/\u003e\n    \u003c/button\u003e\n    ...\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport EasterBreaker from './EasterBreaker.vue'\n    ...\n\u003c/script\u003e\n```\nFull example - https://github.com/Ivan-Corporation/Easter-break/tree/master/examples/vue\n\u003chr/\u003e\n\n\n## Native JavaScript\n\n\n\u003cp align='right'\u003e\n\u003cimg src=https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg alt=react width=\"40\" height=\"40\"/\u003e\n\u003c/p\u003e\n\n```js\n// JS file\nimport easterBreaker from \"easter-break\";\ndocument.getElementById(\"dangerous-button\")\n        .addEventListener(\"click\", () =\u003e easterBreaker());\n```\n\n\n\u003cp align='right'\u003e\n\u003cimg src=https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg alt=react width=\"40\" height=\"40\"/\u003e\n\u003c/p\u003e\n\n```html\n// HTML File\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"button.css\"\u003e\n    \u003cscript src=\"index.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cbutton id=\"dangerous-button\"\u003e\u003c/button\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## File size:\n![image](https://user-images.githubusercontent.com/58357980/172183315-6911dd87-c325-4e7d-b153-1c35ebbb2e86.png)\n\n### If you have CRA 5.0.0 and above and get some garbage in terminal try this script:\n\n\n\u003e \"start\": \"GENERATE_SOURCEMAP=false react-scripts start\",\n\u003chr/\u003e\n\n### If after cliked on button you see:\n\u003e You need to enable JavaScript to run this app.\nIn the left-up corner\n\nJust delete text from your ``index.html`` here:\n```html\n\u003cnoscript\u003eYou need to enable JavaScript to run this app.\u003c/noscript\u003e\n```\n`Note: \nit's only for some kind of boilerplate`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivan-corporation%2Feaster-break","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivan-corporation%2Feaster-break","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivan-corporation%2Feaster-break/lists"}