# electrode-react-context

> React HoC for providing app in the global context

Latest version **1.0.2** (published 2020-12-07) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install electrode-react-context
pnpm add electrode-react-context
yarn add electrode-react-context
bun add electrode-react-context
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-12-07 |
| First published | 2017-08-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2116 |
| Author | Electrode |
| Maintainers | jchip |
| Keywords | react, context, electrode |

## Links

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

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-12-07
- 1.0.1 — 2018-06-14
- 1.0.0 — 2017-08-06

## README

# Electrode React Context

Higher order React component used to add an `app` object property to the global React context. Each Electrode application can pass arbitrary props to make available to components via `this.context.app` but at a minimum should include the hapi `request`.

## Installing

```
npm install electrode-react-context --save
```

## Usage

The typical way to use the context is when contructing the app router. The `electrodeContext` wrapper is used to construct the parent Route component.

~~~js
import electrodeContext from "electrode-react-context";
import uiConfig from "electrode-ui-config";

// This function is invoked both on client and server. The `request` will be undefined on the client.
export const createRoutes = (request) => {
  return (
    <Route path={uiConfig.fullPath()} component={electrodeContext(Page, {request})}>
      <IndexRoute component={Home}/>
      <Route path={uiConfig.fullPath("/status")} component={Status}/>
      <Route path={uiConfig.fullPath("/store")} component={Store}/>
      <Route path={uiConfig.fullPath("/analytics")} component={AnalyticsDemo}/>
      <Route path={uiConfig.fullPath("/cookies")} component={CookiesDemo}/>
    </Route>
  );
};
~~~

Now all components in the app have access to an `app` property in the global context. This should be passed as the last argument to calls to functions exported by `electrode-ui-logger` and `electrode-cookies`. The `app.request` is needed for server-rendering since continuation local storage has been deprecated. By always passing in `app` component authors need not worry whether their component is rendering client or server-side.

~~~js
import log from "electrode-ui-logger";
import config from "electrode-ui-config";

export class Home extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    log.info("Rendering Home component", this.context.app);
    return (
      <Well padded filled={false}>
        <Button onClick={() => log.info("Hi button clicked!", this.context.app)}>
          Hi! {config.ui.name} {config.ui.env}
        </Button>
      </Well>
    );
  }
}

Home.contextTypes = {
  app: PropTypes.object
};
~~~

### Functional Components

Context is also available to functional components as the second argument. The `Home` component above could be re-written as:

~~~js
export const Home = (props, {app}) => {
  log.info("Rendering Home component", app);
  return (
    <Well padded filled={false}>
      <Button onClick={() => log.info("Hi button clicked!", app)}>
        Hi! {config.ui.name} {config.ui.env}
      </Button>
    </Well>
  );
};
~~~

## Working with cookies

The `electrode-cookies` module requires the `request` option when being invoked on the server. Since the `app` has the `request`, it can act as the `options` argument:

~~~js
import Cookies from "electrode-cookies";

const CookieComponent = (props, {app}) => {
  const cookieValue = Cookies.get("cookieName", app);
  return <div>{cookieValue}</div>;
};

CookieComponent.contextTypes = {
  app: PropTypes.object
};
~~~

If you need to pass additional cookie specific options, you could do something like this:

~~~js
Cookies.get("cookieName", Object.assign({}, app, { matchSubStr: true }));
~~~

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