fix: button types and component export standard improvement #492

itsarghyadas · 2025-01-08T08:05:24Z

all button components are now normally exported not with default
all button components now have default HTMLButtonProps and forwardRef support.

vercel · 2025-01-08T08:05:29Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
magicui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 16, 2025 7:40am

dillionverma

some changes

dillionverma · 2025-01-08T18:10:45Z

registry/default/magicui/interactive-hover-button.tsx

@@ -7,7 +7,7 @@ interface InteractiveHoverButtonProps
  text?: string;


we could use children instead of props

registry/default/magicui/pulsating-button.tsx

dillionverma · 2025-01-08T18:20:40Z

registry/default/magicui/animated-subscribe-button.tsx

  buttonColor: string;
  buttonTextColor?: string;
  subscribeStatus: boolean;
  initialText: React.ReactElement | string;
  changeText: React.ReactElement | string;
+  ref?: React.Ref<HTMLButtonElement>;


this won't work since it overrides the forwardref

example:

"use client"; import { PulsatingButton } from "@/registry/default/magicui/pulsating-button"; import { useRef } from "react"; export default function PulsatingButtonDemo() { const ref = useRef<HTMLButtonElement>(null); const handleClick = () => { if (ref.current) { ref.current.style.backgroundColor = "red"; } }; return ( <PulsatingButton ref={ref} onClick={handleClick}> Join Affiliate Program </PulsatingButton> ); }

dillionverma · 2025-01-08T18:21:00Z

registry/default/magicui/animated-subscribe-button.tsx

 import { AnimatePresence, motion } from "motion/react";
 import React, { useState } from "react";

-interface AnimatedSubscribeButtonProps {
+interface AnimatedSubscribeButtonProps extends HTMLMotionProps<"button"> {
  buttonColor: string;
  buttonTextColor?: string;


let's remove the buttoncolor and buttontext color props and prefer tailwind classes instead

dillionverma · 2025-01-08T18:21:39Z

registry/default/magicui/rainbow-button.tsx

@@ -1,33 +1,33 @@
-import React from "react";
+"use client";


we dno't need this here

we still don't need this here

dillionverma · 2025-01-08T18:23:26Z

registry/default/magicui/shiny-button.tsx

@@ -35,39 +35,38 @@ interface ShinyButtonProps extends HTMLMotionProps<"button"> {
  ref?: React.Ref<HTMLButtonElement>;


this ref prop is override the forwardref ref, and thus wont work

dillionverma · 2025-01-08T18:26:02Z

registry/default/magicui/shiny-button.tsx

+    <motion.button
+      ref={ref}
+      {...animationProps}
+      {...props}


this should be at the end of the list of props for this component

dillionverma

some minor fixes

dillionverma · 2025-01-12T00:07:08Z

registry/default/example/interactive-hover-button-demo.tsx

@@ -1,9 +1,9 @@
-import InteractiveHoverButton from "@/registry/default/magicui/interactive-hover-button";
+import { InteractiveHoverButton } from "@/registry/default/magicui/interactive-hover-button";

 export default function InteractiveHoverButtonDemo() {
  return (
    <div className="relative justify-center">


we can remove this surrounding div to make it even simpler

check out shiny button demo for example

Yes we can.

dillionverma · 2025-01-12T00:08:38Z

registry/default/magicui/rainbow-button.tsx

@@ -1,33 +1,33 @@
-import React from "react";
+"use client";


we still don't need this here

dillionverma · 2025-01-12T00:09:37Z

registry/default/magicui/shiny-button.tsx

@@ -29,45 +29,43 @@ const animationProps = {
  },
 } as AnimationProps;

-interface ShinyButtonProps extends HTMLMotionProps<"button"> {
+interface ShinyButtonProps extends Omit<HTMLMotionProps<"button">, "ref"> {


can you explain the reasoning for omitting the 'ref' again?

I don’t think we need to omit it, but the main issue arises when adding a ref to the button. The motion.button accepts a ref that is a different type from a standard one, causing a type conflict.

Declaring the ref in the interface like ref?: React.Ref<HTMLButtonElement>; solves the issue. Essentially, you can either declare the type yourself or omit the ref type from the HTMLMotionProps so it doesn’t validate the ref and avoids throwing errors.

Let me know.

kk lets go with omitting the ref then

interface AnimatedSubscribeButtonProps extends HTMLMotionProps<"button"> { subscribeStatus: boolean; children: React.ReactNode; className?: string; ref?: React.Ref<HTMLButtonElement>; }

This could be another solution - to explicitly declare the type.

wouldn't this result in the ref overriding issue whenever you forwardref?

dillionverma · 2025-01-12T00:10:55Z

registry/default/example/animated-subscribe-button-demo.tsx

 import { AnimatedSubscribeButton } from "@/registry/default/magicui/animated-subscribe-button";

 export default function AnimatedSubscribeButtonDemo() {
  return (
    <AnimatedSubscribeButton
-      buttonColor="#000000"
-      buttonTextColor="#ffffff"
+      className="w-36"


is it possible to remove these props from the demo to simplify it further?

Ideally it's like this

<AnimatedButton>test</AnimatedButton>

Very similar to every component in shadcn

<Button>test</Button>

It also helps when making AI generated code

I’ve thought about this and came up with a workaround, but I’m not sure if it’s the best solution.

The main use case for initialText and changeText is that this button can be used for any text, like follow/followed or subscribe/subscribed.

However, using children for it can be a bit tricky while still maintaining the text change functionality.

<span className="group inline-flex items-center"> Follow <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" /> </span> <span className="group inline-flex items-center"> <CheckIcon className="mr-2 size-4" /> Subscribed </span>

That being said, I want to keep the subscribeStatus={false} prop, as it can also be used externally. For example, in an app, if you want to indicate that something is already subscribed, this provides a great out-of-the-box solution.

dillionverma

small thing

dillionverma · 2025-01-12T22:24:49Z

registry/default/magicui/animated-subscribe-button.tsx

-            style={{ color: buttonColor }}
+    const childrenArray = React.Children.toArray(children);
+    const initialChild = childrenArray[0];
+    const changeChild = childrenArray[1];


this approach is nice! we can also throw error if its not an array of 2 elements

itsarghyadas · 2025-01-14T11:12:23Z

It will throw this error for the animated-subscribe-button if it didn't get two <span> elements

dillionverma

good stuff lets merge this

…pts children

…span> elements

vercel bot deployed to Preview January 8, 2025 08:05 View deployment

dillionverma requested changes Jan 8, 2025

View reviewed changes

vercel bot deployed to Preview January 11, 2025 07:33 View deployment

dillionverma requested changes Jan 12, 2025

View reviewed changes

itsarghyadas force-pushed the button-improvement branch from a6e444c to 22102de Compare January 12, 2025 04:27

vercel bot deployed to Preview January 12, 2025 04:29 View deployment

dillionverma reviewed Jan 12, 2025

View reviewed changes

vercel bot deployed to Preview January 14, 2025 11:11 View deployment

itsarghyadas mentioned this pull request Jan 15, 2025

fix: React.forwardRef() error in rainbow-button.tsx #513

Closed

dillionverma approved these changes Jan 16, 2025

View reviewed changes

itsarghyadas added 4 commits January 16, 2025 13:06

fix: button types and component export standard improvement

cda4ec9

fix: added correct ref in the buttons and made some improvement

1c3d96f

fix: remove unncessary code and making animated-subscribe-button acce…

b54595b

…pts children

feat: throw an error if animated-subscribe-button don't receive two <…

a1e389d

…span> elements

itsarghyadas force-pushed the button-improvement branch from 337655f to a1e389d Compare January 16, 2025 07:37

itsarghyadas mentioned this pull request Jan 16, 2025

fix: make sure interactive-hover-button 's default text color is right #507

Closed

vercel bot deployed to Preview January 16, 2025 07:40 View deployment

itsarghyadas merged commit e0fbe78 into main Jan 16, 2025
5 checks passed

itsarghyadas deleted the button-improvement branch January 16, 2025 07:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: button types and component export standard improvement #492

fix: button types and component export standard improvement #492

itsarghyadas commented Jan 8, 2025

vercel bot commented Jan 8, 2025 •

edited

Loading

dillionverma left a comment

dillionverma Jan 8, 2025

dillionverma Jan 8, 2025

dillionverma Jan 8, 2025

dillionverma Jan 8, 2025

dillionverma Jan 12, 2025

dillionverma Jan 8, 2025

dillionverma Jan 8, 2025

dillionverma left a comment

dillionverma Jan 12, 2025

itsarghyadas Jan 12, 2025

dillionverma Jan 12, 2025

dillionverma Jan 12, 2025

dillionverma Jan 12, 2025

itsarghyadas Jan 12, 2025

dillionverma Jan 12, 2025

itsarghyadas Jan 12, 2025

dillionverma Jan 12, 2025

dillionverma Jan 12, 2025

itsarghyadas Jan 12, 2025

dillionverma left a comment

dillionverma Jan 12, 2025

itsarghyadas commented Jan 14, 2025

dillionverma left a comment

		@@ -7,7 +7,7 @@ interface InteractiveHoverButtonProps
		text?: string;

		@@ -35,39 +35,38 @@ interface ShinyButtonProps extends HTMLMotionProps<"button"> {
		ref?: React.Ref<HTMLButtonElement>;

fix: button types and component export standard improvement #492

fix: button types and component export standard improvement #492

Conversation

itsarghyadas commented Jan 8, 2025

vercel bot commented Jan 8, 2025 • edited Loading

dillionverma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dillionverma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dillionverma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsarghyadas commented Jan 14, 2025

dillionverma left a comment

Choose a reason for hiding this comment

vercel bot commented Jan 8, 2025 •

edited

Loading