Confetti Button

See the component in the preview

You need to use the ComponentPreview component, only need to pass the name of the component as a prop.

See the code of the component

Using the CodeBlockWrapper component, only need to pass the code as a children, this component wrapper has a prop called size, this prop is used to set the a show more button, the possible values are: "full" and "wrapper"

Here is the code of the component using the CodeBlockWrapper on full size:

"use client";
 
import React from "react";
import confetti from "canvas-confetti";
 
const ComponentExample = () => {
  const handleClick = () => {
    confetti();
  };
 
  return (
    <button className="border rounded-md px-4 py-2" onClick={handleClick}>
      Click me
    </button>
  );
};
 
export default ComponentExample;

Here is the code of the component using the CodeBlockWrapper on wrapper size, only to show large code blocks:

"use client";
 
import React from "react";
import confetti from "canvas-confetti";
 
const ComponentExample = () => {
  const handleClick = () => {
    confetti();
  };
 
  return (
    <button className="border rounded-md px-4 py-2" onClick={handleClick}>
      Click me
    </button>
  );
};
 
export default ComponentExample;

Show the component code and highlight especific lines

You can show the component code and highlight specific lines, only need to pass the line number on the code block

"use client";
 
import React from "react";
import confetti from "canvas-confetti";
 
const ComponentExample = () => {
  const handleClick = () => {
    confetti();
  };
 
  return (
    <button className="border rounded-md px-4 py-2" onClick={handleClick}>
      Click me
    </button>
  );
};
 
export default ComponentExample;

You can show the component code and add line numbers

"use client";
 
import React from "react";
import confetti from "canvas-confetti";
 
const ComponentExample = () => {
  const handleClick = () => {
    confetti();
  };
 
  return (
    <button className="border rounded-md px-4 py-2" onClick={handleClick}>
      Click me
    </button>
  );
};
 
export default ComponentExample;

You can highlight words in the code

"use client";
 
import React from "react";
import confetti from "canvas-confetti";
 
const ComponentExample = () => {
  const handleClick = () => {
    confetti();
  };
 
  return (
    <button className="border rounded-md px-4 py-2" onClick={handleClick}>
      Click me
    </button>
  );
};
 
export default ComponentExample;