# react-hivemind

> Hivemind is a Context Provider and Store component that provides many features. The main idea is to wrap the app with this component, and it will take care of adding listeners to screen size, scrolls, and more. the component also checks if the user is usi

Latest version **1.0.0** (published 2019-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hivemind
pnpm add react-hivemind
yarn add react-hivemind
bun add react-hivemind
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-03-13 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 90.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | jorgebaralt |
| Maintainers | jorgebaralt |

## Links

- npm: https://www.npmjs.com/package/react-hivemind
- Repository: https://github.com/jorgebaralt/react-hivemind
- Homepage: https://github.com/jorgebaralt/react-hivemind#readme
- Issues: https://github.com/jorgebaralt/react-hivemind/issues
- npm.io page: https://npm.io/package/react-hivemind

## Dependencies (1)

- [smoothscroll-polyfill](https://npm.io/package/smoothscroll-polyfill.md) ^0.4.3

## Recent versions

- 1.0.0 (latest) — 2019-03-13
- 0.3.0 — 2019-03-13
- 0.2.0 — 2019-03-13
- 0.1.0 — 2019-03-13

## README

# Description

Hivemind is a Context Provider and Store component that provides many
features. The main idea is to wrap the app with this component, and it
will take care of adding listeners to screen size, scrolls, and more.
the component also checks if the user is using a web browser on a mobile
device or desktop, and applies functions accordingly. For now we only
have one default function that we consider useful,
smoothscroll-polyfill:

# Install

Use in bash CLI:

`$ npm install --save react-hivemind`

# Showcase

[![Edit react-hivemind](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pk3zox43yj?fontsize=14)

[Example on CodeSandbox](https://pk3zox43yj.codesandbox.io/)

[Website use Example](jorgebaralt.com)
In the website is used to keep track of the width, and decide when to render a Hamburger menu (for mobile or width < 800)

# React Plug-Hivemind

> Hivemind is a Context Provider and Store component that provides many
> features.

[![NPM](https://img.shields.io/npm/v/react-png-flipcard.svg)](https://www.npmjs.com/package/react-hivemind) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Instructions

1. literally, just plug and go.
2. import { HivemindStore } from 'react-hivemind'
3. Wrap your app or any high order component with HivemindStore
4. add any additional functions that you want to be called on init

## Features

1. Access to basic data through the whole app
2. Call functions when app starts ,or whether device is mobile or not.

## Props

| Props         | Functionality                                                             |
| ------------- | ------------------------------------------------------------------------- |
| `isMobile`    | callback function that gets called if the browser is opened on mobile     |
| `isNotMobile` | callback function that gets called if the browser is not opened on mobile |
| `onAppStart`  | callback function that gets called when the app start                     |

Check usage for examples

## Usage

### For React.js version ^16.8

#### setup

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import { HivemindStore } from 'react-hivemind';

const Root = () => {
  return (
    <HivemindStore
      isMobile={() => {
        console.log('yes it is mobile');
        console.log('scroll-polyfill applied');
      }}
      isNotMobile={() => {
        console.log('nop, this is not mobile');
      }}
      onAppStart={() => {
        console.log('App started');
      }}
    >
      <App />
    </HivemindStore>
  );
};
ReactDOM.render(<Root />, document.getElementById('root'));
```

#### Usage

```jsx
import HivemindContext from 'react-hivemind'

const example = () => {
  const { scrollY, width, height, isMobile } = useContext(HivemindContext)
  return(
    <div>
    <div className={classes.Example}>
        <h3>Screen data: Resize the screen and scroll down to check</h3>
        <p style={{ fontSize: 24 }}>
          <span className={classes.Data}>Width:</span>
          {width}
        </p>
        <p style={{ fontSize: 24 }}>
          <span className={classes.Data}>height:</span>
          {height}
        </p>
        <p style={{ fontSize: 24 }}>
          <span className={classes.Data}>ScrollY:</span>
          {scrollY}
        </p>
        <h3>Detect if device is mobile</h3>
        <p style={{ fontSize: 24 }}>
          <span className={classes.Data}>Is Mobile: </span>
          {isMobile ? 'true' : 'false'}
        </p>
        <h3>Applied functions</h3>
        <p style={{ fontSize: 24 }}>
          <span className={classes.Data}>Applied functions: </span>
          Open the console, and see check the logs of the functions being called
          accordingly
        </p>
      </div>
    </div>
  )
```

## License

MIT © [jorgebaralt](https://github.com/jorgebaralt)

---
_Source: https://npm.io/package/react-hivemind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._