Przejdź do treści

Excalidraw w apikacji react

  • przez

Pewnie znasz i używałeś aplikację https://excalidraw.com/ W tym poście chciałbym Ci pokazać jak możesz użyć tej aplikacji w swojej aplikacji napisanej w react.

Zacznijmy od utworzenia nowej aplikacji

npx create-react-app react-excalidraw-demo --template typescript

Będę używał biblioteki, którą możesz znaleźć na github tutaj. Dokumetnację znajdziesz tutaj. Dodajmy excalidraw do naszego projektu:

npm install @excalidraw/excalidraw

A teraz najważniejsze, dodajmy komponent do naszej aplikacji. W tym celu zmienimy zawartość pliku App.tsx na poniższą:

import "./App.css";
import { Excalidraw } from "@excalidraw/excalidraw";

function App() {
    return (
        <div className="App">
            <h1 style={{ textAlign: "center" }}>React Excalidraw Demo</h1>
            <div style={{ height: "500px", width: "80%", margin: "auto" }}>
                <Excalidraw />
            </div>
        </div>
    );
}

export default App;

Uruchommy naszą aplikację npm run start i pod adresem localhost:3000 powinniśmy zobaczyć to co poniżej:

Dość dużo używam excalidraw (oczywiście używam też miro czy draw.io) i nie wiedziałem, że mogę dodać taki komponent do swojego projektu. Ale się dowiedziałem i postanowiłem się tym podzielić 😀 Kod źródłowy znajdziesz tutaj.

Tagi: