/react-for-electron-only

React component for rendering component for Electron based clients only

Primary LanguageJavaScriptMIT LicenseMIT

react-for-electron-only

build status Coverage Status PRs Welcome GitHub issues

NPM

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

Open Source Love

refer LICENSE file in this repository.