1.0.5 • Published 3 years ago
react-hidden-easter-egg v1.0.5
react-hidden-easter-egg
react-hidden-easter-egg is a react base component that allow you to add easter egg, that will trigger after user typing the secret code.
codesandbox demo -> Demo and advance example
Installation
Use the package manager npm to install .
npm i react-hidden-easter-eggUsage
import React from "react";
import { HiddenEasterEgg } from "react-hidden-easter-egg";
export default function App() {
return (
<div className="App">
<h1 style={{ top: '50%', left: "50%", position: 'absolute' }}> react-hidden-easter-egg !!! </h1>
<HiddenEasterEgg resetEggMs={10000} cb={() => console.log('finish')}>
wow !
</HiddenEasterEgg>,
</div>
);
}
// mobile example
// In MOBILE_CLICK mode, 1 - click , 2 - double click
import React from "react";
import { HiddenEasterEgg } from "react-hidden-easter-egg";
export default function AppMobile() {
return (
<div className="App">
<h1 style={{ top: '50%', left: "50%", position: 'absolute' }}> react-hidden-easter-egg !!! </h1>
<HiddenEasterEgg code={[1, 2, 1]} codeMode="MOBILE_CLICK" resetEggMs={10000} cb={() => console.log('finish')}>
wow !
</HiddenEasterEgg>,
</div>
);
}| props | type | default value | info |
|---|---|---|---|
| cb | function or undefined | undefined | Callback function that will trigger when user type the code. |
| code | string[] or number[] | konami code ('ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a') | The code use to trigger callback function or show hidden component. |
| codeMode | "key" or "keyCode" or "MOBILE_CLICK" | "key" | Code mode used to detect user typing (notice keycode is deprecated for some browsers). |
| children | any | undefined | children to render in case code is enter |
| resetEggMs | number | 0 | In case you want 'children' to re-hide after a few millisecond use this props. |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.