pixel-editor.md

Pixel Editor

I denna övning ska du skapa en pixel editor enligt GIF:en nedan.

;

Komponenter

Följande komponenter ska finnas med:

• App - Huvudkomponenten
• Editor - Själva editorn som innehåller resterande komponenter nedan
• DrawingPanel - Komponenten som ritar ut alla rader
• Row - En rad som innehåller ett antal pixlar
• Pixel - En pixel

NPM-paket

Till denna övning behövs en "color picker" som du kan se i GIF:en ovan. Nedan hittar du länk till en "color picker" för React. Installera i ditt projekt med kommandot npm install react-color i terminalen.

React: react-color

För att få ut och spara vilken färg användaren klickar på:

import { useState } from 'react';
import { TwitterPicker } from 'react-color';

function Editor() {
    const [pixelColor, setPixelColor] = useState('#000000');

    return (
        <section className='editor'>
            <TwitterPicker onChangeComplete={ selectPixelColor } />
        </section>
    )
}

export default Editor;