custom-component-testing

custom-component-testing A lightweight and customizable React component library that includes:

🔍 Autocomplete – A smart, interactive input with dropdown suggestions
🔘 Button – A fully flexible button component with icons, radius, and sizing options

✨ Features

🚀 Easy to integrate into any React project 🎯 Built with TypeScript for type safety 🔄 Autocomplete supports both local filtering and async fetching 🎨 Button supports icons, border radius, size, and custom styles

📦 Installation npm install custom-component-testing

or

yarn add custom-component-testing

💡 Note: Ensure your project supports CSS Modules and static asset imports (e.g., images) if you're using Webpack or Vite. 🔄 Autocomplete Component ✅ Props

Prop Type Description

options Recipe[] (optional) Static array to filter

fetchOptions (val: string) => void (optional) Async fetch function for suggestions

onChange (val?: string) => void Called when input value changes

onSelect (val?: string) => void Called when an option is selected

label string (optional) Placeholder/label for the input

name string (optional) Input field name

📋 Static Data Example import React from 'react'; import { Autocomplete } from 'custom-component-testing';

const staticOptions = [ { name: 'Pizza' }, { name: 'Burger' }, { name: 'Pasta' } ];

function App() { return ( <Autocomplete label="Search your favorite food" name="food" options={staticOptions} onChange={(val) => console.log('Typing:', val)} onSelect={(val) => console.log('Selected:', val)} /> ); }

export default App;

🌐 Async Fetch Example import React from 'react'; import { Autocomplete } from 'custom-component-testing';

async function fetchRecipes(query: string) { // Example: return from API or local filter return [ { name: 'Tomato Soup' }, { name: 'Tandoori Chicken' } ]; }

function App() { return ( <Autocomplete label="Search Recipe" fetchOptions={fetchRecipes} onSelect={(val) => console.log('Selected:', val)} /> ); }

export default App;

🔘 Button Component ✅ Props

Prop Type Description

type "primary" | "secondary" | "disabled" Button styling theme

onClick () => void Click handler

startIcon string Image URL before the button text

endIcon string Image URL after the植物 text

borderRadius "normal" | "rounded" Adjust border shape

customDesign React.CSSProperties Inline style customization

children React.ReactNode Button label or JSX content

size "small" | "normal" | "large" Adjusts padding and icon size

📋 Button Usage Example import React from 'react'; import { Button } from 'custom-component-testing';

function App() { return ( <Button type="primary" size="large" borderRadius="rounded" startIcon="/icons/plus.png" onClick={() => alert('Button Clicked!')} > Add Item ); }

export default App;

📁 Project Structure custom-component-testing/ ├── Autocomplete.tsx ├── Button.tsx ├── index.module.css ├── utils.ts └── assets/ ├── arrow_down.png ├── arrow_up.png └── close.png

🛠 Built With

React TypeScript CSS Modules

🧪 Local Testing To test components locally: npm install npm run dev

You may use tools like Vite, Storybook, or React Styleguidist for component showcasing. 📝 License MIT © [Your Name]