Inline Toast

A toast component that shows a code snippet and a copy button. It animates when copied and displays a success message. It is used to provide feedback after copying code.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/inline-toast

npx layro-cli add @watermeloncorp/inline-toast

npx layro-cli add @watermeloncorp/inline-toast

bunx layro-cli add @watermeloncorp/inline-toast

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { useState, type FC } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { IoCheckmarkCircle } from 'react-icons/io5';

export interface InlineCopyToastProps {
  code: string;
  copyDuration?: number;
}

export const InlineToast: FC<InlineCopyToastProps> = ({
  code,
  copyDuration = 2000,