{"library":"react-spreadsheet","title":"React Spreadsheet","description":"React Spreadsheet is a library for building simple, customizable, and performant spreadsheet components within React applications. As of version 0.10.1, it focuses on providing a straightforward API for common use cases while maintaining flexibility. It has seen consistent updates, with recent releases introducing a new formula evaluation engine that supports cell dependencies and ranges (v0.8.0), and features like row/column selection (v0.7.0). The library differentiates itself by emphasizing 'Just Components™' and aiming for performance without virtualization, making it suitable for scenarios where a fully virtualized, complex spreadsheet might be overkill. It ships with TypeScript type declarations, ensuring a better developer experience with type introspection.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-spreadsheet"],"cli":null},"imports":["import { Spreadsheet } from 'react-spreadsheet'","import { CellBase } from 'react-spreadsheet'","import { DataEditor } from 'react-spreadsheet'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { Spreadsheet, CellBase } from 'react-spreadsheet';\n\ninterface MyData extends CellBase {\n  value: string;\n}\n\nconst initialData: MyData[][] = [\n  [{ value: 'Header 1' }, { value: 'Header 2' }, { value: 'Header 3' }],\n  [{ value: 'Row 1, Cell 1' }, { value: 'Row 1, Cell 2' }, { value: 'Row 1, Cell 3' }],\n  [{ value: 'Row 2, Cell 1' }, { value: 'Row 2, Cell 2' }, { value: 'Row 2, Cell 3' }],\n  [{ value: '=SUM(A2:B2)' }, { value: '=A2*B2' }, { value: 'Example Formula' }]\n];\n\nfunction MySpreadsheetApp() {\n  const [data, setData] = useState<MyData[][]>(initialData);\n\n  const handleDataChange = (newData: MyData[][]) => {\n    console.log('Spreadsheet data changed:', newData);\n    setData(newData);\n  };\n\n  return (\n    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>\n      <h1>Simple React Spreadsheet</h1>\n      <p>Edit cells, including basic formulas like =SUM(A2:B2).</p>\n      <Spreadsheet data={data} onChange={handleDataChange} />\n    </div>\n  );\n}\n\nexport default MySpreadsheetApp;","lang":"typescript","description":"This quickstart demonstrates the basic setup of `react-spreadsheet`, showing how to render a simple spreadsheet component with initial data, including a basic formula, and handle changes to its content.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}