### Install React Konva and Konva

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Install the necessary packages for React Konva and Konva using npm.

```bash
npm install react-konva konva --save
```

--------------------------------

### Basic React Konva Example with Clickable Rectangle

Source: https://github.com/konvajs/react-konva/blob/master/README.md

A simple example demonstrating how to create a stage, layer, text, and a clickable rectangle that changes color on click using React Konva.

```javascript
import React, { useState } from 'react';
import { render } from 'react-dom';
import { Stage, Layer, Rect, Text } from 'react-konva';
import Konva from 'konva';

const ColoredRect = () => {
  const [color, setColor] = useState('green');

  const handleClick = () => {
    setColor(Konva.Util.getRandomColor());
  };

  return <Rect x={20} y={20} width={50} height={50} fill={color} shadowBlur={5} onClick={handleClick} />;
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="Try click on rect" />
        <ColoredRect />
      </Layer>
    </Stage>
  );
};

render(<App />, document.getElementById('root'));
```

--------------------------------

### Install Canvas Module for Konva <= 9

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Manually install the 'canvas' module to resolve 'Module not found: Can't resolve 'canvas'' errors when using Konva versions 9 or earlier with Next.js. This approach adds an unnecessary dependency.

```bash
npm install canvas@next
```

--------------------------------

### Getting Reference to Konva Objects using useRef

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Demonstrates how to get a reference to a Konva instance of a node using the `useRef` hook in React. This allows direct interaction with the Konva object.

```javascript
import React, { useEffect, useRef } from 'react';

const MyShape = () => {
  const circleRef = useRef();

  useEffect(() => {
    // log Konva.Circle instance
    console.log(circleRef.current);
  }, []);

  return <Circle ref={circleRef} radius={50} fill="black" />;
};
```

--------------------------------

### Create Canvas Component for Next.js

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Define your canvas components outside of the 'pages' or 'app' folders to ensure they are only loaded on the client-side. This example shows a basic Circle component within a Stage and Layer.

```javascript
import { Stage, Layer, Circle } from 'react-konva';

function Canvas(props) {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle x={200} y={100} radius={50} fill="green" />
      </Layer>
    </Stage>
  );
}

export default Canvas;
```

--------------------------------

### Draggable Circle with Color Change on Drag End (Non-Strict Mode Behavior)

Source: https://github.com/konvajs/react-konva/blob/master/README.md

A draggable circle that changes color on drag end. This example illustrates the default non-strict mode behavior where manually changed properties (like position during drag) are not reset by React Konva.

```javascript
import { Circle } from 'react-konva';
import Konva from 'konva';

const Shape = () => {
  const [color, setColor] = React.useState();

  return (
    <Circle
      x={0}
      y={0}
      draggable
      radius={50}
      fill={color}
      onDragEnd={() => {
        setColor(Konva.Util.getRandomColor());
      }}
    />
  );
};
```

--------------------------------

### Import Minimal React-Konva

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Load the minimal version of 'react-konva' to reduce bundle size. This version does not include core shapes or filters by default. Import specific shapes into the Konva namespace if needed.

```javascript
// load minimal version of 'react-konva'
import { Stage, Layer, Rect } from 'react-konva/lib/ReactKonvaCore';

// minimal version has NO support for core shapes and filters
// if you want import a shape into Konva namespace you can just do this:
import 'konva/lib/shapes/Rect';
```

--------------------------------

### Configure Webpack for Konva in Next.js

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Set up `next.config.js` to make Konva and react-konva work by adding 'canvas' to `config.externals`. This is a required step for certain Next.js versions to resolve Konva's dependencies.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals = [...config.externals, { canvas: 'canvas' }]; // required to make Konva & react-konva work
    return config;
  },
};

module.exports = nextConfig;
```

--------------------------------

### Configure Turbopack for Canvas Alias in Next.js

Source: https://github.com/konvajs/react-konva/blob/master/README.md

If using Turbopack with Next.js, configure `next.config.js` to use an alias for the 'canvas' module, pointing to an empty file. This bypasses the need for the actual 'canvas' module during server-side rendering.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        canvas: './empty.js',
      },
    },
  },
};

module.exports = nextConfig;
```

--------------------------------

### Use Dynamic Import for Canvas Component in Next.js

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Import your canvas component using dynamic import with `ssr: false` to ensure it's loaded only on the client-side. This prevents server-side rendering issues and avoids the need for the 'canvas' module during SSR.

```javascript
'use client';
import dynamic from 'next/dynamic';

const Canvas = dynamic(() => import('../components/canvas'), {
  ssr: false,
});

export default function Page(props) {
  return <Canvas />; 
}
```

--------------------------------

### Bridging React Context within Stage

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Use this pattern when you need to access React Context from children of the react-konva Stage component. It involves creating a Provider as a child of the Stage to bridge the context.

```javascript
import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Rect } from 'react-konva';

const ThemeContext = React.createContext('red');

const ThemedRect = () => {
  const value = React.useContext(ThemeContext);
  return <Rect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} />;
};

const Canvas = () => {
  return (
    <ThemeContext.Consumer>
      {(value) => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
            <Layer>
              <ThemedRect />
            </Layer>
          </ThemeContext.Provider>
        </Stage>
      )}
    </ThemeContext.Consumer>
  );
};

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="blue">
        <Canvas />
      </ThemeContext.Provider>
    );
  }
}
```

--------------------------------

### Enabling Strict Mode Globally in React Konva

Source: https://github.com/konvajs/react-konva/blob/master/README.md

Enables strict mode globally for all React Konva components. In strict mode, properties of nodes are always updated to the values provided in the render function.

```javascript
import { useStrictMode } from 'react-konva';

useStrictMode(true);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.