### Start Demo Locally (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Starts the demo application locally, typically on a random available port. Requires Node.js.

```bash
npm start
```

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

### Install Dependencies (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Installs the project's dependencies using npm. Ensure Node.js is installed.

```bash
npm install
```

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

### Start Demo Locally on Custom Port (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Starts the demo application locally on a specified port (e.g., 3000). Requires Node.js.

```bash
npm start -p 3000
```

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

### Build Demo (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Builds the demo application, often for deployment or static hosting. Requires Node.js.

```bash
npm run storybook:build
```

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

### Build Library (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Builds the React PIN Field library, producing distributable files. Requires Node.js.

```bash
npm run build
```

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

### Install react-pin-field with npm

Source: https://github.com/soywod/react-pin-field/blob/master/README.md

Installs the react-pin-field package using npm. This is the primary step to include the component in a React project.

```bash
npm install react-pin-field
```

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

### Run Unit Tests (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Executes the unit tests for the React PIN Field library using Jest. Requires Node.js.

```bash
npm run test:unit
```

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

### Run End-to-End Tests (npm)

Source: https://github.com/soywod/react-pin-field/blob/master/CONTRIBUTING.md

Executes the end-to-end tests using Cypress. This requires the Storybook to be running locally on port 3000.

```bash
npm run test:e2e
```

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

### Access and Focus Input Element via Ref

Source: https://github.com/soywod/react-pin-field/blob/master/README.md

Shows how to use the `useRef` hook in React to get a reference to the PinField component's internal input elements. This allows direct manipulation, such as focusing a specific input.

```tsx
const ref = useRef<HTMLInputElement[]>();

<PinField ref={ref} />;

// focus the third input
ref.current[2].focus();
```

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

### Import PinField Component in TypeScript

Source: https://github.com/soywod/react-pin-field/blob/master/README.md

Demonstrates how to import the PinField component from the 'react-pin-field' library in a TypeScript React application. This is a standard import statement.

```typescript
import PinField from "react-pin-field";
```

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

### Control PinField State with usePinField Hook

Source: https://github.com/soywod/react-pin-field/blob/master/README.md

Illustrates how to use the `usePinField` custom hook to manage the state of the PinField component in a controlled manner. The handler exposes value, setValue, state, and dispatch for state management.

```tsx
const handler = usePinField();

// The handler exposes a value and setValue to control the PIN code,
// as well as a state and dispatch for advanced usage.

// Let know the PIN field that you want to use this custom state
// instead of its internal one.
return <PinField handler={handler} />
```

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

### Define Props for React PIN Field

Source: https://github.com/soywod/react-pin-field/blob/master/README.md

Defines the TypeScript types for the props of the PinField component. It inherits native input properties and overrides specific event handlers, while adding custom props like length, format, and callbacks.

```typescript
// React PIN Field inherits native props from HTMLInputElement,
// except few event handlers that are overriden:
type NativeProps = Omit<
  InputHTMLAttributes<HTMLInputElement>,
  "onChange" | "onKeyDown" | "onCompositionStart" | "onCompositionEnd"
>;

type Props = NativeProps & {
  length?: number;
  format?: (char: string) => string;
  formatAriaLabel?: (index: number, total: number) => string;
  onChange?: (value: string) => void;
  onComplete?: (value: string) => void;  
};
```

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