Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anubhavsrivastava/react-for-electron-only
React component for rendering component for Electron based clients only
https://github.com/anubhavsrivastava/react-for-electron-only
desktop detect-electron electron electron-react isomorphic-applications react react-component react-electron reactjs
Last synced: 4 months ago
JSON representation
React component for rendering component for Electron based clients only
- Host: GitHub
- URL: https://github.com/anubhavsrivastava/react-for-electron-only
- Owner: anubhavsrivastava
- License: mit
- Created: 2018-10-26T17:42:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T15:00:25.000Z (about 2 years ago)
- Last Synced: 2024-09-29T01:40:40.572Z (4 months ago)
- Topics: desktop, detect-electron, electron, electron-react, isomorphic-applications, react, react-component, react-electron, reactjs
- Language: JavaScript
- Homepage:
- Size: 438 KB
- Stars: 44
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# `react-for-electron-only`
[](https://travis-ci.org/anubhavsrivastava/react-for-electron-only/)
[](https://coveralls.io/github/anubhavsrivastava/react-for-electron-only?branch=master)
[](http://makeapullrequest.com)
[](https://github.com/anubhavsrivastava/react-for-electron-only/issues)
[](https://www.npmjs.com/package/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](https://electronjs.org/) (ref: [isElectron](#iselectron-function) function).
`` would render children in case when react application runs in [Electron](https://electronjs.org/) 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`](https://electronjs.org/docs/api/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. ``
import ForElectronOnly from 'electron-only';
...
render(){
return (
This will only get rendered on Electron
)
}
...
This will render `div.electron-ui` on electron and nothing on normal browsers.
2. `` with `fallbackComponent` option
import ForElectronOnly from 'electron-only';
...
render(){
return (
This will only get rendered in Browser }>
This will only get rendered on Electron
)
}
...
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 (
This will only get rendered in Electron }>
This will only get rendered on Browser
)
}
...
`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
[](LICENSE)
refer `LICENSE` file in this repository.