<commit_before># Usage

## Network
React hook for getting network status (effective connection type)

```
import { useEffectiveConnectionType } from './network';

const MyComponent = () => {
  const effectiveConnectionType = useEffectiveConnectionType();

  let media;
  switch(effectiveConnectionType) {
    case 'slow-2g':
      media = <img className="responsive" src="…" alt="low resolution" />;
      break;
    case '2g':
      media = <img className="responsive" src="…" alt="medium resolution" />;
      break;
    case '3g':
      media = <img className="responsive" src="…" alt="high resolution" />;
      break;
    case '4g':
      media = <video className="responsive" src="…" controls />;
      break;
    default:
      media = <video className="responsive" src="…" controls />;
      break;
  }
  
  return <div>{media}</div>;
};
```

## Memory
React hook for getting memory status of the device

```
import { useMemoryStatus } from './memory';

const MyComponent = () => {
  const { overLoad } = useMemoryStatus();
  return (
    <div>
      { overLoad ? <img src='...' /> : <video src='...' /> }
    </div>
  );
};
```

## Device-class
React hook for getting device-class whether it's light or heavy

```
import { useDeviceClass } from './device-class';

const MyComponent = () => {
  const deviceClass = useDeviceClass();
  return (
    <div>
      { deviceClass === ‘light’ ? <img src='...' /> : <video src='...' /> }
    </div>
  );
};
```

## Battery
React hook for getting battery status

```
import { useBatteryStatus } from './battery';

const MyComponent = () => {
  const batteryStatus = useBatteryStatus();
  return (
    <div>
      { batteryStatus.level > 0.75 ? <video src='...' /> : <img src='...' /> }
    </div>
  );
};
```<commit_msg>Docs: Tweak docs for Hooks<commit_after># Usage

The following are a suite of [React Hooks](https://reactjs.org/docs/hooks-overview.html) for providing reusable stateful behavior in the form of environment-signals between different components.

## Network
React hook for getting network status (effective connection type)

```js
import { useEffectiveConnectionType } from './network';

const MyComponent = () => {
  const effectiveConnectionType = useEffectiveConnectionType();

  let media;
  switch(effectiveConnectionType) {
    case 'slow-2g':
      media = <img className="responsive" src="…" alt="low resolution" />;
      break;
    case '2g':
      media = <img className="responsive" src="…" alt="medium resolution" />;
      break;
    case '3g':
      media = <img className="responsive" src="…" alt="high resolution" />;
      break;
    case '4g':
      media = <video className="responsive" src="…" controls />;
      break;
    default:
      media = <video className="responsive" src="…" controls />;
      break;
  }
  
  return <div>{media}</div>;
};
```

## Memory
React hook for getting memory status of the device

```js
import { useMemoryStatus } from './memory';

const MyComponent = () => {
  const { overLoad } = useMemoryStatus();
  return (
    <div>
      { overLoad ? <img src='...' /> : <video src='...' /> }
    </div>
  );
};
```

## Device-class
React hook for getting device-class whether it's light or heavy

```js
import { useDeviceClass } from './device-class';

const MyComponent = () => {
  const deviceClass = useDeviceClass();
  return (
    <div>
      { deviceClass === ‘light’ ? <img src='...' /> : <video src='...' /> }
    </div>
  );
};
```

## Battery
React hook for getting battery status

```js
import { useBatteryStatus } from './battery';

const MyComponent = () => {
  const batteryStatus = useBatteryStatus();
  return (
    <div>
      { batteryStatus.level > 0.75 ? <video src='...' /> : <img src='...' /> }
    </div>
  );
};
```
{'fraction_non_alphanumeric': 0.17390146471371504, 'fraction_numerical': 0.0037283621837549932, 'mean_word_length': 3.0561555075593954, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 51, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4284270', 'n_tokens_mistral': 1167, 'n_tokens_neox': 1133, 'n_words': 327}