React Component for Writing Isomorphic Apps (Browser / Electron)

react-for-electron-only

React component for rendering component for Electron based clients only. It can be used for detection of Electron (ref:function). <ForElectronOnly> would render children in case when react application runs in Electron Desktop client, else would render nothing(null) .

Use Cases

Trivial Case

Considering any isomorphic app which is distributed on ElectronJS and also over Web with same react codebase, say for eg. slack (which renders same UI on electron desktop client and web), there are use cases when you want to render particular DOM node/components on Electron Only and not on browser or vice versa.

Exclusive Functionality

There are set of APIs from electron that would give native UI feel eg, dialog module. For instance, one may have folder/file path as input text on browser while on electron one may use dialog.showOpenDialog functionality via a button. Use of such APIs also eliminate some validation errors.

Install

$ npm install electron-only --save

or

yarn add electron-only

Example

1. <ForElectronOnly>

   import ForElectronOnly from 'electron-only';
   
   ...
   render(){
       return (
           <ForElectronOnly>
               <div className="electron-ui">
                   This will only get rendered on Electron
               </div>
           </ForElectronOnly>
       )
   }
   ...

   This is render div.electron-ui on electron and nothing on normal browsers.

2. <ForElectronOnly> with fallbackComponent option

   import ForElectronOnly from 'electron-only';
   
   ...
   render(){
       return (
           <ForElectronOnly
           fallbackComponent={<div className="browser-ui"> This will only get rendered in Browser </div>}>
               <div className="electron-ui">
                   This will only get rendered on Electron
               </div>
           </ForElectronOnly>
       )
   }
   ...

   This is render div.electron-ui on electron and div.browser-ui on browser.

3. ForNonElectronOnly (supports fallbackComponent prop)

   import {ForNonElectronOnly} from 'electron-only';
   
   ...
   render(){
       return (
           <ForNonElectronOnly
           fallbackComponent={<div className="electron-ui"> This will only get rendered in Electron </div>}>
               <div className="browser-ui">
                   This will only get rendered on Browser
               </div>
           </ForNonElectronOnly>
       )
   }
   ...

   ForNonElectronOnly is exactly opposite of ForElectronOnly , ie, it will render div.electron-ui on electron and div.browser-ui on browser.

APIs

ForElectronOnly Component

Import mechanism

import ForElectronOnly from 'electron-only'

Properties

prop type description default value children (default) node Component to be render for electron null fallbackComponent node Component/Node to be rendered for browser null

ForNonElectronOnly Component

Import mechanism

import {ForNonElectronOnly} from 'electron-only'

Properties

prop type description default value children (default) node Component to be render for browser null fallbackComponent node Component/Node to be rendered for electron null

isElectron function

Import mechanism

import {isElectron} from 'electron-only'
//or import ElectronOnly from 'electron-only';
// and then ElectronOnly.isElectron function can be used

Return values

value description comment true if code is executed on Electron false if code is not executed on Electron implies both browser and server execution

License

refer LICENSE file in this repository.