archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(docs-home): customized button confetti

Browse Source
This commit is contained in:
Junior Garcia 2022-08-31 10:46:04 -03:00
parent c9427b78c2
commit 2db85ed2f3
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/docs/src/components/templates/custom-button/index.tsx
View File

@ -1,12 +1,18 @@
import React from "react";
import {useRef} from "react";
import {Button} from "@nextui-org/react";
import confetti from "canvas-confetti";
const CustomButton = () => {
const handleConfetti = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
const {currentTarget} = event;
const buttonRef = useRef<HTMLButtonElement | null>(null);
const handleConfetti = () => {
const {clientWidth, clientHeight} = document.documentElement;
const {y: targetY, x: targetX, width: targetWidth} = currentTarget.getBoundingClientRect();
const boundingBox = buttonRef.current?.getBoundingClientRect?.();
const targetY = boundingBox?.y ?? 0;
const targetX = boundingBox?.x ?? 0;
const targetWidth = boundingBox?.width ?? 0;
const targetCenterX = targetX + targetWidth / 2;
confetti({
@ -22,6 +28,7 @@ const CustomButton = () => {
return (
<Button
ref={buttonRef}
auto
rounded
css={{