react-accordion-core v0.1.0

React Accordion Core

English | 简体中文 | 繁體中文 | 日本語

A lightweight and customizable accordion component for React applications. Built with TypeScript and modern React practices, it provides a smooth and responsive user experience.

Features

• 🎯 Simple and intuitive API
• 🎨 Highly customizable styles
• 📱 Responsive design
• ⚡ Smooth animations
• 🔧 TypeScript support
• 📦 Lightweight
• 🧪 Comprehensive test coverage

Installation

npm install react-accordion-core
# or
yarn add react-accordion-core

Basic Usage

import { CardFlip } from 'react-accordion-core';

const App = () => {
  const cards = [
    { title: "Card 1", details: "Content 1" },
    { title: "Card 2", details: "Content 2" },
    { title: "Card 3", details: "Content 3" }
  ];

  return (
    <CardFlip 
      cards={cards}
      containerWidth="80%"
      cardColor="#76B900"
    />
  );
};

API

CardFlip Props

Card Type

interface Card {
  title: string;    // Card title
  details: string;  // Card content
}

React Accordion Core

一个轻量级且可自定义的 React 手风琴组件。使用 TypeScript 和现代 React 实践构建，提供流畅和响应式的用户体验。

特性

• 🎯 简单直观的 API
• 🎨 高度可定制的样式
• 📱 响应式设计
• ⚡ 流畅的动画效果
• 🔧 TypeScript 支持
• 📦 轻量级设计
• 🧪 完整的测试覆盖

安装

npm install react-accordion-core
# 或
yarn add react-accordion-core

基础使用

import { CardFlip } from 'react-accordion-core';

const App = () => {
  const cards = [
    { title: "卡片 1", details: "内容 1" },
    { title: "卡片 2", details: "内容 2" },
    { title: "卡片 3", details: "内容 3" }
  ];

  return (
    <CardFlip 
      cards={cards}
      containerWidth="80%"
      cardColor="#76B900"
    />
  );
};

API

CardFlip 属性

Card 类型

interface Card {
  title: string;    // 卡片标题
  details: string;  // 卡片内容
}

React Accordion Core

一個輕量級且可自定義的 React 手風琴元件。使用 TypeScript 和現代 React 實踐構建，提供流暢和響應式的用戶體驗。

特性

• 🎯 簡單直觀的 API
• 🎨 高度可定製的樣式
• 📱 響應式設計
• ⚡ 流暢的動畫效果
• 🔧 TypeScript 支援
• 📦 輕量級設計
• 🧪 完整的測試覆蓋

安裝

npm install react-accordion-core
# 或
yarn add react-accordion-core

基礎使用

import { CardFlip } from 'react-accordion-core';

const App = () => {
  const cards = [
    { title: "卡片 1", details: "內容 1" },
    { title: "卡片 2", details: "內容 2" },
    { title: "卡片 3", details: "內容 3" }
  ];

  return (
    <CardFlip 
      cards={cards}
      containerWidth="80%"
      cardColor="#76B900"
    />
  );
};

API

CardFlip 屬性

Card 類型

interface Card {
  title: string;    // 卡片標題
  details: string;  // 卡片內容
}

React Accordion Core

軽量でカスタマイズ可能な React アコーディオンコンポーネント。TypeScript とモダンな React プラクティスで構築され、スムーズでレスポンシブなユーザー体験を提供します。

特徴

• 🎯 シンプルで直感的な API
• 🎨 高度にカス���マイズ可能なスタイル
• 📱 レスポンシブデザイン
• ⚡ スムーズなアニメーション
• 🔧 TypeScript サポート
• 📦 軽量設計
• 🧪 包括的なテストカバレッジ

インストール

npm install react-accordion-core
# または
yarn add react-accordion-core

基本的な使用方法

import { CardFlip } from 'react-accordion-core';

const App = () => {
  const cards = [
    { title: "カード 1", details: "内容 1" },
    { title: "カード 2", details: "内容 2" },
    { title: "カード 3", details: "内容 3" }
  ];

  return (
    <CardFlip 
      cards={cards}
      containerWidth="80%"
      cardColor="#76B900"
    />
  );
};

API

CardFlip プロパティ

Card 型

interface Card {
  title: string;    // カードのタイトル
  details: string;  // カードの内容
}

License

MIT © Ausdata Science