react-for-electron-only
React component for rendering component for Electron based clients only.
<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
-
<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.
-
<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.
-
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.