https://github.com/ivan-corporation/easter-break
Ideal package for some easter egg in your site. He just give you onClick function with canvas destroying current page ☠️
https://github.com/ivan-corporation/easter-break
canvas easter-break easter-egg funny javascript nextjs npm-package physics react typescript vannila-js vue webpack
Last synced: about 1 year ago
JSON representation
Ideal package for some easter egg in your site. He just give you onClick function with canvas destroying current page ☠️
- Host: GitHub
- URL: https://github.com/ivan-corporation/easter-break
- Owner: Ivan-Corporation
- License: mit
- Created: 2022-06-06T14:08:56.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-20T01:57:27.000Z (over 3 years ago)
- Last Synced: 2024-11-10T18:03:17.718Z (over 1 year ago)
- Topics: canvas, easter-break, easter-egg, funny, javascript, nextjs, npm-package, physics, react, typescript, vannila-js, vue, webpack
- Language: TypeScript
- Homepage: https://codesandbox.io/s/easter-break-y8o6t4
- Size: 2.37 MB
- Stars: 52
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/easter-break)
[](https://standardjs.com)
# Easter break 
### Ideal package for some easter egg in your site. This package just give you ``onClick function`` with canvas destroying current page
# Examples
https://user-images.githubusercontent.com/58357980/172224333-ab09a58b-5e78-4b68-90cc-16bdb07318a1.mp4
## Komotedly - NextJS
### Check here (button on the opened left menu): https://komotedly.netlify.app/
## Vue boilerplate
## Codesandbox
### Or check codesandbox - https://codesandbox.io/s/easter-break-y8o6t4?file=/src/App.tsx
# Installation
## Write in terminal of your workspace:
```bash
npm i easter-break
```
or
```bash
yarn add easter-break
```
# Usage
`Note: Button is fully customizable because this package it's just onClick function with Canvas support`
## React
```ts
// EasterBreaker.tsx
import easterBreaker from "easter-break";
const EasterBraker = () => {
return (
Break me
);
};
export default EasterBraker
```
``` ts
// App.tsx
import EasterBreaker from './EasterBreaker'
function App() {
return (
...
...
```
Full example - https://github.com/Ivan-Corporation/Easter-break/tree/master/examples/react
## Vue 3
```vue
// EasterBreaker.vue
import easterBreaker from 'easter-break'
export default {
name: 'easter-breaker',
methods: {
destroy(){
easterBreaker();
}
}
}
```
``` vue
// HelloWorld.vue
...
...
import EasterBreaker from './EasterBreaker.vue'
...
```
Full example - https://github.com/Ivan-Corporation/Easter-break/tree/master/examples/vue
## Native JavaScript
```js
// JS file
import easterBreaker from "easter-break";
document.getElementById("dangerous-button")
.addEventListener("click", () => easterBreaker());
```
```html
// HTML File
```
## File size:
### If you have CRA 5.0.0 and above and get some garbage in terminal try this script:
> "start": "GENERATE_SOURCEMAP=false react-scripts start",
### If after cliked on button you see:
> You need to enable JavaScript to run this app.
In the left-up corner
Just delete text from your ``index.html`` here:
```html
You need to enable JavaScript to run this app.
```
`Note:
it's only for some kind of boilerplate`