priyesh-bhanderi-react-packages

A reusable React component library built with Material UI and fully compatible with Tailwind CSS and Vite. This package includes components like HeadingAddBtn and AllLableInput for rapid UI development.

Installation

Install the package via npm or yarn:

Tailwind CSS Setup

If you use Tailwind CSS with Vite, include this package's files in your tailwind.config.js so Tailwind scans them for class names:

module.exports = { content: [ "./src//*.{js,jsx,ts,tsx}", "./node_modules/priyesh-bhanderi-react-packages/dist//*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }

Usage

Import components from the package and use them in your React app. Optionally import the CSS if your package exposes styles as a separate file. import React, { useState } from 'react'; import { HeadingAddBtn, AllLableInput } from 'priyesh-bhanderi-react-packages'; import 'priyesh-bhanderi-react-packages/dist/priyesh-bhanderi-react-packages.css'; // Optional if exists

function App() { const [data, setData] = useState({ google_review: '', website: '', dob: null, country: '', avatar: null, pin: '', // add more fields as needed });

const [errors, setErrors] = useState({});

const fields = [ { type: 'number', label: 'Google Review', value: data.google_review, onChange: (e) => setData(prev => ({ ...prev, google_review: e.target.value })), placeholder: 'Enter Google Review', error: !!errors.google_review, errorText: errors.google_review, }, { type: 'text', label: 'Website', value: data.website, onChange: (e) => setData(prev => ({ ...prev, website: e.target.value })), placeholder: 'Enter Website URL', error: !!errors.website, errorText: errors.website, }, { type: 'date', label: 'Date of Birth', value: data.dob, onChange: (date) => setData(prev => ({ ...prev, dob: date })), maxDate: true, // example to restrict maxDate inside component error: !!errors.dob, errorText: errors.dob, }, { type: 'select', label: 'Country', value: data.country, onChange: (e) => setData(prev => ({ ...prev, country: e.target.value })), options: [ { value: 'us', name: 'United States' }, { value: 'ca', name: 'Canada' }, { value: 'uk', name: 'United Kingdom' }, ], error: !!errors.country, errorText: errors.country, }, // Add more fields as needed ];

return ( <HeadingAddBtn title="Add Item" onAdd={() => alert('Add clicked!')} />

  <form>
    {fields.map((field, i) => (
      <AllLableInput key={i} {...field} />
    ))}
  </form>

</div>

); }

export default App;

Available Components

• HeadingAddBtn - A button component designed to add headings or items.
• AllLableInput - A versatile input component supporting types such as text, number, date, time, select, multiselect, file upload, password (including 6-digit PIN), rating, radio, and more.

Contributing

Feel free to open issues or submit pull requests via GitHub.

GitHub Repository

Example How To Use

https://github.com/vyomPriyesh/test-packages.git

Replace priyesh-bhanderi with your actual GitHub username.

License

MIT License © [Your Name]

If you want me to help you automate README generation or add more detailed prop documentation, just ask!