React Integration

ZingGrid works with your development stack, including React! In this guide, we'll walk you through how to add ZingGrid to your React project. This article covers using ZingGrid with React hooks (v16.8 and up).

Usage

For this example we'll start with a new React app:

npx create-react-app zinggrid-react-helloworld
cd zinggrid-react-helloworld
npm install zinggrid
npm start

You can now view the app in a browser at localhost:3000.

In App.js, import ZingGrid:
```
import 'zinggrid';
```
Remove the contents of the App() function and replace them with this line below. You may also remove the import logo... statement, we won't be needing it.
```
return <zing-grid />
```
When you save the file, the page should refresh and show an empty ZingGrid, with the message There are no records to display.
Let's add some data and update the zinggrid component to show it. Here's the full App.js file for this example:

import './App.css';
import 'zinggrid'

function App() {
  const data = [
    {"name": "Sousage", "breed": "Dachshund"},
    {"name": "Plop", "breed": "Corgi"},
    {"name": "Floof", "breed": "Pomeranian"}
  ]

  return <zing-grid caption="Dogs" data={JSON.stringify(data)} />
}

export default App;

For more details on integrating ZingGrid into a React app, see this article.