Ideal package for some easter egg in your site. This package just give you onClick function with canvas destroying current page
video-example.mp4
Check here (button on the opened left menu): https://komotedly.netlify.app/
Or check codesandbox - https://codesandbox.io/s/easter-break-y8o6t4?file=/src/App.tsx
npm i easter-breakor
yarn add easter-breakNote: Button is fully customizable because this package it's just onClick function with Canvas support
// EasterBreaker.tsx
import easterBreaker from "easter-break";
const EasterBraker = () => {
return (
<button onClick={easterBreaker}>Break me </button>
);
};
export default EasterBraker// App.tsx
import EasterBreaker from './EasterBreaker'
function App() {
return (
<div className="App">
...
<EasterBreaker/>
...
</div>Full example - https://github.com/Ivan-Corporation/Easter-break/tree/master/examples/react
// EasterBreaker.vue
<template>
<div class="button" @click="destroy" >
Break me
</div>
</template>
<script >
import easterBreaker from 'easter-break'
export default {
name: 'easter-breaker',
methods: {
destroy(){
easterBreaker();
}
}
}
</script>// HelloWorld.vue
<template>
...
<button>
<easter-breaker/>
</button>
...
</template>
<script>
import EasterBreaker from './EasterBreaker.vue'
...
</script>Full example - https://github.com/Ivan-Corporation/Easter-break/tree/master/examples/vue
// JS file
import easterBreaker from "easter-break";
document.getElementById("dangerous-button")
.addEventListener("click", () => easterBreaker());
// HTML File
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
<script src="index.js"></script>
</head>
<body>
<button id="dangerous-button"></button>
</body>
</html>
"start": "GENERATE_SOURCEMAP=false react-scripts start",
You need to enable JavaScript to run this app. In the left-up corner
Just delete text from your index.html here:
<noscript>You need to enable JavaScript to run this app.</noscript>Note: it's only for some kind of boilerplate