# react-ionize
> An experimental React renderer for Electron apps
Latest version **1.5.0** (published 2017-04-10) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-ionize
pnpm add react-ionize
yarn add react-ionize
bun add react-ionize
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.5.0 |
| Published | 2017-04-10 |
| First published | 2017-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+48 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1196 |
| Author | Matt Hink |
| Maintainers | mhink |
| Keywords | react, reactjs, electron, desktop, app, atom, osx, windows |
## Links
- npm: https://www.npmjs.com/package/react-ionize
- Repository: https://github.com/mhink/ionize
- Issues: https://github.com/mhink/ionize/issues
- npm.io page: https://npm.io/package/react-ionize
## Dependencies (2)
- [electron](https://npm.io/package/electron.md) ^1.6.2
- [react-dom](https://npm.io/package/react-dom.md) 16.0.0-alpha.5
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.5.0 (latest) — 2017-04-10
- 1.4.0 — 2017-04-04
- 1.3.0 — 2017-04-01
- 1.2.0 — 2017-04-01
- 1.1.0 — 2017-04-01
## README
# react-ionize
[Electron](https://electron.atom.io) applications consist of two types of process: a *main process* which manages the lifecycle of the application, and several *renderer processes*, which display webpages which comprise the application's GUI. It's fairly common to use React and ReactDOM to build a GUI in the renderer process.
react-ionize is a library which lets you use the same React component-based architechure to manage the lifecycle of your application in the Electron main process. It is essentially a replacement for ReactDOM- but instead of flushing component updates to a DOM, it flushes them out to Electron's API. Think React Native for Electron apps.
## Caveat Developer
react-ionize is still an EXPERIMENTAL, PRE-ALPHA library, and is not yet
suitable for for use in a production app! It's a custom renderer built on top
of the React Fiber reconciliation API, which itself is still under active
development. (Not to mention, I've got a whole crop of Electron features yet
to add.)
## Getting Started
```
* yarn add react-ionize
* yarn add react-dom@16.0.0-alpha.5
```
Take a look at [Ionize Example App](https://github.com/mhink/ionize-example-app) to get started.
## Hello, world!
```
import React from 'react';
import Ionize from 'react-ionize';
import path from 'path';
import fs from 'fs';
const INDEX_HTML_PATH = path.resolve(__dirname, 'index.html');
const INDEX_HTML_SOURCE = `
Hello, Electron!
Hello, Electron!
`;
fs.writeFileSync(INDEX_HTML_PATH, INDEX_HTML_SOURCE);
Ionize.start(
);
```
## API
### `Ionize.start(element, [callback])`
Starts up an Electron application under Ionize. (Note: this will wait on the
'ready' Electron event before starting to render any elements.)
## Elements
Generally speaking, the presence of an Ionize element in your component tree
indicates that you _want_ it to be there, and that Ionize should ensure its
presence when rendering. This can lead to slightly surprising behavior if
you're unfamiliar with React- for instance, if you want a window to actually
go away when you close it, you need to make sure that the corresponding ``
element actually gets unmounted!
### ``
Attachment point for event handlers related to the global app. Not strictly
necessary if you don't need to register any of these (since React Fiber now
supports multiple children without a parent element).
Generally speaking, children of `` are things related to the entire
application: browser windows, dialogs, tray elements, and so forth. (Or at
least, they will be once I get a chance to implement them.)
* Event Handlers
* onReady- Fired immediately when the component is mounted.
### ``
Represents an Electron BrowserWindow object.
* file
* The HTML file you want to render in the Chrome browser instance. (Note
that Ionize looks up this file relative to the _runtime_ location of
your project!)
* show
* When this prop transitions from false -> true, Ionize displays the
browser window. When it transitions from true -> false, Ionize hides
(but does not close) the browser window. If this is true when the
element is mounted, Ionize will immediately show the window.
* showDevTools
* If this is true when the element is mounted, Ionize will open
the Chrome Developer Tools when opening the browser window.
* Event Handlers
* onReadyToShow
* onClose
* onClosed
* onBlur
* onFocus
* onShow
### `