### Installing react-signature-canvas

Source: https://github.com/agilgur5/react-signature-canvas/blob/main/README.md

This command installs the react-signature-canvas package as a dependency to your project.

```sh
npm i -S react-signature-canvas
```

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

### Basic Usage of react-signature-canvas

Source: https://github.com/agilgur5/react-signature-canvas/blob/main/README.md

This example demonstrates how to import and use the SignatureCanvas component in a React application. It renders a signature canvas with specified pen color and canvas properties.

```jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import SignatureCanvas from 'react-signature-canvas'

createRoot(
  document.getElementById('my-react-container')
).render(
  <SignatureCanvas penColor='green'
    canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} />,
)
```

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

### Initializing Signature Canvas with Ref in React

Source: https://github.com/agilgur5/react-signature-canvas/blob/main/README.md

This code initializes a SignatureCanvas component in a React application and uses useRef to create a reference to the component. This allows access to the SignatureCanvas instance methods.

```jsx
import React, { useRef } from 'react'
import SignatureCanvas from 'react-signature-canvas'

function MyApp() {
  const sigCanvas = useRef(null);

  return <SignatureCanvas ref={sigCanvas} />
}
```

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