anubhavsrivastava/react-for-electron-only

React component for rendering component for Electron based clients only

react-for-electron-only

React component for rendering component for Electron based clients only. If you’re serving up the same code to a Web client and an Electron-based desktop client, this could help you split them apart where-ever necessary. It can be used for detection of Electron (ref: isElectron 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 will 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 will 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

---

Contribution

Suggestions and PRs are welcome!

Please create issue or open PR request for contribution.

---

License

refer LICENSE file in this repository.