KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

react-pixel-grid

★ 18 Open GitHub ↗

Render a grid of squares to a webgl canvas.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-pixel-grid &nbsp; &nbsp; [![Latest Version](https://img.shields.io/npm/v/react-pixel-grid.svg?style=flat)](https://npmjs.org/package/react-pixel-grid)

A simple component that wraps [freeman-lab/pixel-grid](https://github.com/freeman-lab/pixel-grid).

`npm install react-pixel-grid`

### [Demo](https://dpren.github.io/react-pixel-grid/)

## Usage

![screenshot](https://raw.githubusercontent.com/dpren/react-pixel-grid/master/screenshot.png "screenshot")

```jsx
import PixelGrid from "react-pixel-grid";

<PixelGrid
  data={Array(64).fill(0).map(Math.random)}
  options={{
    size: 10,
    padding: 2,
    background: [0, 0.5, 1],
  }}
/>
```

<br/>

![screenshot2](https://raw.githubusercontent.com/dpren/react-pixel-grid/master/screenshot2.png "screenshot2")

```jsx
const r = "#f00";
const g = "#0f0";
const b = "#00f";
const x = "#000";

<PixelGrid data={[
    x, r, x, g, x, b, 
    r, x, g, x, b, x, 
    x, r, x, g, x, b, 
    r, x, g, x, b, x, 
    x, r, x, g, x, b, 
    r, x, g, x, b, x,
]} />
```

react-pixel-grid

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README