michaelrambeau / Pixel Grid
A component to render a grid of pixels, implemented with different technologies: React, Preact...
Programming Languages
javascript
184084 projects - #8 most used programming language
pixel-grid (Work in progress)
GOAL: Create a dumb component that renders a grid of pixels.
This is a component made for pixel-art-react project by Javier Valencia.
The grid renders any array of cells and triggers events when the user interacts with the grid by either:
- clicking on a cell
- doing drag-and-drop on the grid
See the module pages for more details:
- React implementation: pixel-grid-react module
- Preact implementation: coming soon!
REQUIREMENT: it has to be fast!
How to use it
<Grid
cells={[]}
onCellEvent={fn}
/>
The grid will trigger a onCellEvent(id) callback every time a cell is clicked or dragged-and-dropped.
Development
npm start
Production deploy
Step 1: build the minified JavaScript file in www/build/ folder
npm run build
Step 2: push www folder to surge.sh (a wondeful web static hosting service)
npm run deploy
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].