react-mic-cam-permissions/README.md

Managing camera and microphone permissions with React

# React-Mic-Cam-Permissions

**React-Mic-Cam-Permissions** is a React library for managing camera and microphone permissions in web applications. It allows users to request and manage permissions seamlessly, while displaying status messages to inform the user of the results.

To install the library, run the following command:

```bash
npm i react-mic-cam-permissions
```

## Use

### 1\. Microphone permission request

You can use the `MicrophonePermissionButton` component to request permission to use the microphone. Just add it to your component and pass the events to find out if permission was granted or denied.

#### Example code:
```tsx
import React from 'react';
import { MicrophonePermissionButton } from 'media-permissions';

const App = () => {
  const handleGranted = () => {
    console.log('Microphone permission granted');
  };

  const handleDenied = () => {
    console.log('Microphone permission denied');
  };

  return (
    <div>
      <h1>Microphone Permission</h1>
      <MicrophonePermissionButton
        buttonText="Request Microphone Permission"
        onGranted={handleGranted}
        onDenied={handleDenied}
      />
    </div>
  );
};

export default App;

```

### 2\. Camera permission request

The `CameraPermissionButton` component works the same as the one for the microphone, but for the camera.

#### Example code:

```tsx
import React from 'react';
import { CameraPermissionButton } from 'media-permissions';

const App = () => {
  const handleGranted = () => {
    console.log('Camera permission granted');
  };

  const handleDenied = () => {
    console.log('Camera permission denied');
  };

  return (
    <div>
      <h1>Camera Permission</h1>
      <CameraPermissionButton
        buttonText="Request Camera Permission"
        onGranted={handleGranted}
        onDenied={handleDenied}
      />
    </div>
  );
};

export default App;

```

### 3\. Viewing permission status

The `PermissionStatus` component allows you to display the current status of permissions for the camera or microphone, with icons adapted to indicate whether the permission has been granted, denied, or is pending.

#### Example code:

```tsx
import React from 'react';
import { PermissionStatus } from 'media-permissions';

const App = () => {
  return (
    <div>
      <h1>Permission Status</h1>
      <PermissionStatus permissionType="microphone" state="granted" />
      <PermissionStatus permissionType="camera" state="denied" />
    </div>
  );
};

export default App;

```

### 4\. Full display with device selection

You can also display available devices (cameras and microphones) and allow users to select them using the `PermissionStatusDisplay` component.

#### Example code:

```tsx
import React from 'react';
import { PermissionStatusDisplay } from 'media-permissions';

const App = () => {
  return (
    <div>
      <h1>Media Permissions</h1>
      <PermissionStatusDisplay />
    </div>
  );
};

export default App;

```

### 5\. Managing permissions via the hook

You can also manage permissions directly with the `useCameraPermission` and `useMicrophonePermission` hooks.

#### Example of using the microphone hook:
```tsx
import React, { useEffect } from 'react';
import { useMicrophonePermission } from 'media-permissions';

const App = () => {
  const { permissionState, requestPermission } = useMicrophonePermission();

  useEffect(() => {
    console.log('Microphone permission state:', permissionState);
  }, [permissionState]);

  return (
    <div>
      <h1>Microphone Permission</h1>
      <button onClick={requestPermission}>Request Microphone Permission</button>
      <p>Current Permission State: {permissionState}</p>
    </div>
  );
};

export default App;

```

#### Example of using the camera hook:

```tsx
import React, { useEffect } from 'react';
import { useCameraPermission } from 'media-permissions';

const App = () => {
  const { permissionState, requestPermission } = useCameraPermission();

  useEffect(() => {
    console.log('Camera permission state:', permissionState);
  }, [permissionState]);

  return (
    <div>
      <h1>Camera Permission</h1>
      <button onClick={requestPermission}>Request Camera Permission</button>
      <p>Current Permission State: {permissionState}</p>
    </div>
  );
};

export default App;

```
## Features

* **Permission request**: You can request permissions for the camera and microphone.
* **Status display**: The `PermissionStatus` component allows you to display the permission status.
* **Device Selection**: Display available video and audio devices for the user to select.
* **Custom hooks**: Manage permissions directly in your components with the `useCameraPermission` and `useMicrophonePermission` hooks.

## API

### Components

#### `MicrophonePermissionButton`

* `className`: Customizes the style of the button.
* `buttonText`: The text to display on the button.
* `onGranted`: Callback when permission is granted.
* `onDenied`: Callback when permission is denied.

#### `CameraPermissionButton`

Works the same as `MicrophonePermissionButton`, but for the camera.

#### `PermissionStatus`

* `permissionType`: Can be `camera` or `microphone`.
* `state`: The state of the permission, can be `granted`, `denied`, `prompt` or `unavailable`.
* `className`: Customizes the display style.

#### `PermissionStatusDisplay`

Displays a set of controls for managing permissions and selecting devices.

### Hooks

#### `useMicrophonePermission`

Returns the permission status for the microphone as well as a function to request this permission.

#### `useCameraPermission`

Returns the permission status for the camera as well as a function to request this permission.