React Dining Tables

A visually appealing React component to showcase stylish dining tables with interactive chair visualization.

Installation

Easily enhance your React app by installing the react-dining-tables package using npm:

npm install react-dining-tables


Usage

Integrate the ReactTableChair component seamlessly into your React application:

jsx

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTableChair from 'react-dining-tables';
import 'react-dining-tables/styles.css'; // Import the styles

const App = () => {
  const tables = [
    { id: 1, chair: 4, booked: true, details: "Luxury Dining Set" },
    { id: 2, chair: 6, booked: false, details: "Modern Table Design" },
    // ... more tables
  ];

  const handleTableSelect = (tableId) => {
    // Handle table selection logic
    console.log('Table selected:', tableId);
  };

  return (
    <div>
      <h1>Welcome to Our Dining Area</h1>
      <ReactTableChair
        data={tables}
        onTableSelect={handleTableSelect}
        bgColor="#102720"
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<details>
<summary><strong>Expand for Props</strong></summary>

    data (required): An array of objects representing the dining tables with their properties.
    onTableSelect (required): A function to handle table selection.
    bgColor: Background color of the dining area.

</details>
Styling

The react-dining-tables package provides an elegant default styling for the dining tables component. Customize the styles by overriding the provided CSS classes in your project.