Package Exports

env-hoc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (env-hoc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

env-hoc (for Next.js & After.js)

Provides an universal HOC (higher-order component) for Next.js / After.js and populates the component props and the getInitialProps args object with an env property, which gives access to cookies, ipAddress, language(s) and userAgent on server-side and client-side in a standardized way.

Save time: Most important thing: short if-else-blocks, no formatting needed, no old-browser-carrying, etc.
Standardized: Accept-Language && User-Agent && Cookie headers are parsed and avaiable in the same format as in window. (same parsing libraries / functions && reformatting && backwards compatibility)
Access to IP address: IP address is available client-side and there are checked 10+ properties to ensure you always get the best match. Supports enabling / disabling of trusting proxies.
Fully tested: Tested for strange edge cases, missing HTTP headers or missing window properties.
Some nice to have features:
- Console.warns() while process.ENV.NODE_ENV === 'development', if server props !== client props
- Possibility to only use props from the HTTP request

Install

npm i env-hoc

Usage

//default options:
{
  trustProxy: true,
  cookieParser: {}, //will be passed to cookie.parse from the cookie package
  debug: process.env.NODE_ENV === 'development',
  useServerProps: false, //if true it uses the props from server-rendering only
  /*
  useServerProps can also be an object and works then only on the specified values
  useServerProps: {
    cookies: true,
  },
  */
}

import React from 'react';
import withEnv from 'env-hoc';

class Environment extends React.Component {
  static getInitialProps(args) {
    console.log('args.env:', args.env);
  }

  render() {
    console.log('this.props:', this.props.env);
    return (
      <div className="page">
        <h1>About</h1>
        <pre>userAgent: {this.props.env.userAgent}</pre>
        <pre>language: {this.props.env.language}</pre>
        <pre>languages: {this.props.env.languages.join(', ')}</pre>
        <pre>ipAddress: {this.props.env.ipAddress}</pre>
        <pre>cookies: {JSON.stringify(this.props.env.cookies)}</pre>
      </div>
    );
  }
}

export default withEnv(Environment);

// Or if you like decorators:
@withEnv
export default class Environment extends React.Component {}

//example with options:
export default withEnv({
  trustProxy: false,
})(Environment);

@withEnv({
  trustProxy: false,
})
export default class Environment extends React.Component {}

//or configure it only once somewhere: configuredWithEnv.js
export default withEnv({
  trustProxy: false,
});

import configuredWithEnv from './configuredWithEnv';

@configuredWithEnv
export default class Environment extends React.Component {}

/* CONSOLE:
args.env: { userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36',
  language: 'de-DE',
  languages: [ 'de-DE', 'de', 'en-US', 'en', 'bs', 'hr' ],
  cookies: {},
  ipAddress: '::1' }
this.props: { userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36',
  language: 'de-DE',
  languages: [ 'de-DE', 'de', 'en-US', 'en', 'bs', 'hr' ],
  cookies: {},
  ipAddress: '::1' }
*/

Some hints

If you want to be a good programmer or support very old browsers, you should still check if a property is avaiable, if some data isn't avaiable, then it will be always for:

all properties except cookies: null
cookies: {}

So a short if () {} will do it mostly.