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 6 hours 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 (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-03-20T01:57:27.000Z (over 1 year ago)
• Last Synced: 2024-11-10T18:03:17.718Z (8 days 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

        
[![NPM](https://img.shields.io/npm/v/easter-break.svg)](https://www.npmjs.com/package/easter-break)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![NPM](https://img.shields.io/npm/l/easter-break)

![npm](https://img.shields.io/npm/dm/easter-break)

![GitHub stars](https://img.shields.io/github/stars/Ivan-Corporation/easter-break?style=social)

# 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/

![image](https://user-images.githubusercontent.com/58357980/172209922-ab5ee04a-dc53-4be7-ba91-20c245a4b198.png)

## Vue boilerplate

![image](https://user-images.githubusercontent.com/58357980/172308331-1208b07f-6c33-4075-bbca-f27810abc1b8.png)

## 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

   


     Break me

   


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:

![image](https://user-images.githubusercontent.com/58357980/172183315-6911dd87-c325-4e7d-b153-1c35ebbb2e86.png)

### 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`