Next.js & After.js)
env-hoc (optimized forProvides an universal HOC (higher-order component) for React components and populates the component props and the getInitialProps args object with an env property, which gives access to cookies, language(s), userAgent and doNotTrack in a standardized way. If you are using Next.js / After.js you will get also access to the IP address and benefit heavily from the standardized API on server-side and client-side.
- Save time: Most important thing: short if-else-blocks, no formatting needed, no old-browser-carrying, etc.
- Standardized:
Accept-Language
&&User-Agent
&&Cookie
&&DNT
headers are parsed and available in the same format as inwindow
. (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 proxy trusting.
- 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
Feature requests for additional properties are welcomed
Install
You can install it directly from npm:
npm i env-hoc
or, if you are using yarn:
yarn add env-hoc
Usage
decorators
withJust import the package and add it as a decorator to every page where you want to have access to the env
object.
;; @withEnvComponent //getInitialProps is a Next.js/After.js thing, just ignore it, if you aren't using one of them static { console; } { console; return <div> <h1>Environment</h1> <pre>userAgent: thispropsenvuserAgent</pre> <pre>language: thispropsenvlanguage</pre> <pre>languages: thispropsenvlanguages</pre> <pre>ipAddress: thispropsenvipAddress</pre> <pre>cookies: JSON</pre> <pre>doNotTrack: thispropsenvdoNotTrack ? 'true' : 'false'</pre> </div> ; } ;
console output
/* CONSOLE OUTPUT:
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: {},
doNotTrack: true,
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: {},
doNotTrack: true,
ipAddress: '::1' }
*/
without decorators
Just import the package and wrap it around every page where you want to have access to the env
object.
;; Component //getInitialProps is a Next.js/After.js thing, just ignore it, if you aren't using one of them static { console; } { console; return <div> <h1>Environment</h1> <pre>userAgent: thispropsenvuserAgent</pre> <pre>language: thispropsenvlanguage</pre> <pre>languages: thispropsenvlanguages</pre> <pre>ipAddress: thispropsenvipAddress</pre> <pre>cookies: JSON</pre> <pre>doNotTrack: thispropsenvdoNotTrack ? 'true' : 'false'</pre> </div> ; } Environment;
Example with options
//without decoratorEnvironment; //with decorator@Component {}
onetime configuration
You can also configure withEnv once in a file and then import it from there when needed.
//file: configuredWithEnv.js trustProxy: false; //file: page.js; //with decorator@configuredWithEnvComponent {} //without decorator
Configuration / Options
- trustProxy: (boolean) If true, then it trusts proxy HTTP headers.
- cookieParser: (object) Is beeing passed to the parse function of the cookie package.
- debug: (boolean) If true, then it console.warns() you about different client / server behaviour.
- useServerProps: (boolean/object) If true, only the props from server-rendering are used. You can also pass an object with keys matching the key from this.props.env and enable usage of server props only partially. For example:
;
Default options
;
Some hints
If you want to be a good programmer or support very old browsers, you should still check if a property is available, if some data isn't available, then it will be always for:
- all properties except cookies:
null
- cookies:
{}
So a short if () {}
will do it mostly.