anubhavsrivastava / React For Electron Only
Programming Languages
Projects that are alternatives of or similar to React For Electron 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
-
<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. -
<ForElectronOnly>
withfallbackComponent
optionimport 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 anddiv.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 ofForElectronOnly
, ie, it will renderdiv.electron-ui
on electron anddiv.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.