# react-dining-tables

Latest version **1.1.0** (published 2023-08-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-dining-tables
pnpm add react-dining-tables
yarn add react-dining-tables
bun add react-dining-tables
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-08-10 |
| First published | 2023-08-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Abhijith |
| Maintainers | abhijith_213- |

## Links

- npm: https://www.npmjs.com/package/react-dining-tables
- npm.io page: https://npm.io/package/react-dining-tables

## Recent versions

- 1.1.0 (latest) — 2023-08-10
- 1.0.8 — 2023-08-10
- 1.0.7 — 2023-08-10
- 1.0.6 — 2023-08-10
- 1.0.5 — 2023-08-10
- 1.0.4 — 2023-08-10
- 1.0.3 — 2023-08-10
- 1.0.2 — 2023-08-10
- 1.0.1 — 2023-08-10
- 1.0.0 — 2023-08-09

## README

<div align="center">
  <img src="package-logo.png" alt="React Dining Tables Logo" width="200" />
</div>

# React Dining Tables

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



<div align="center">
  <img src="sample-screenshot.png" alt="React Dining Tables Sample Screenshot" />
</div>

## Installation

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

```bash
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.

---
_Source: https://npm.io/package/react-dining-tables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._