React
Reaction Button
사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트입니다. 좋아요, 관심있어요 등의 감정적 피드백을 간편하게 제공할 때 사용됩니다.
import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
import { Count, PrefixIcon } from "@seed-design/react";
import { ReactionButton } from "seed-design/ui/reaction-button";
export default function ReactionButtonPreview() {
return (
<ReactionButton>
<PrefixIcon svg={<IconFaceSmileCircleFill />} />
도움돼요
<Count>1</Count>
</ReactionButton>
);
}Installation
npx @seed-design/cli@latest add ui:reaction-buttonpnpm dlx @seed-design/cli@latest add ui:reaction-buttonyarn dlx @seed-design/cli@latest add ui:reaction-buttonbun x @seed-design/cli@latest add ui:reaction-button의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:reaction-button
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import {
ReactionButton as SeedReactionButton,
type ReactionButtonProps as SeedReactionButtonProps,
} from "@seed-design/react";
import * as React from "react";
import { LoadingIndicator } from "./loading-indicator";
export interface ReactionButtonProps extends SeedReactionButtonProps {}
/**
* @see https://seed-design.io/react/components/reaction-button
* If `asChild` is enabled, manual handling of `LoadingIndicator` is required.
*/
export const ReactionButton = React.forwardRef<
React.ElementRef<typeof SeedReactionButton>,
ReactionButtonProps
>(({ loading = false, children, ...otherProps }, ref) => {
return (
<SeedReactionButton ref={ref} loading={loading} {...otherProps}>
{loading ? <LoadingIndicator>{children}</LoadingIndicator> : children}
</SeedReactionButton>
);
});
ReactionButton.displayName = "ReactionButton";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
Props
Prop
Type
pressed?boolean | undefineddefaultPressed?boolean | undefinedonPressedChange?((pressed: boolean) => void) | undefinedExamples
Small
import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
import { Count, PrefixIcon } from "@seed-design/react";
import { ReactionButton } from "seed-design/ui/reaction-button";
export default function ReactionButtonSmall() {
return (
<ReactionButton size="small">
<PrefixIcon svg={<IconFaceSmileCircleFill />} />
도움돼요
<Count>1</Count>
</ReactionButton>
);
}Xsmall
import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
import { Count, PrefixIcon } from "@seed-design/react";
import { ReactionButton } from "seed-design/ui/reaction-button";
export default function ReactionButtonXsmall() {
return (
<ReactionButton size="xsmall">
<PrefixIcon svg={<IconFaceSmileCircleFill />} />
도움돼요
<Count>1</Count>
</ReactionButton>
);
}Disabled
import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ReactionButton } from "seed-design/ui/reaction-button";
export default function ReactionButtonDisabled() {
return (
<ReactionButton disabled>
<PrefixIcon svg={<IconFaceSmileCircleFill />} />
비활성
</ReactionButton>
);
}Loading
import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { useState } from "react";
import { ReactionButton } from "seed-design/ui/reaction-button";
export default function ReactionButtonLoading() {
const [pressed, setPressed] = useState(false);
const [loading, setLoading] = useState(false);
function handleToggle() {
setLoading(true);
setTimeout(() => {
setLoading(false);
setPressed((prev) => !prev);
}, 2000);
}
// 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
return (
<ReactionButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
<PrefixIcon svg={<IconFaceSmileCircleFill />} />
시간이 걸리는 토글
</ReactionButton>
);
}Last updated on