# preact-photon

**Repository Path**: mirrors_developit/preact-photon

## Basic Information

- **Project Name**: preact-photon
- **Description**: :rocket: Beautiful desktop apps with Preact + Photon :heart:
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# preact-photon

[![NPM](http://img.shields.io/npm/v/preact-photon.svg?style=flat)](https://www.npmjs.org/package/preact-photon)
[![travis-ci](https://travis-ci.org/developit/preact-photon.svg?branch=master)](https://travis-ci.org/developit/preact-photon)


A little wrapper around [photon] to make it cake to use via [preact] _(or React `*`)_.

This requires that you already have the [photon] CSS included in your app.

## What does it look like?

Well, this: **[Preact + Photon = <3](http://codepen.io/developit/pen/ZbajXQ?editors=001)** _(@ [CodePen](http://codepen.io/developit/pen/ZbajXQ?editors=001) or [JSFiddle](https://jsfiddle.net/developit/g5qnLnue/))_

<img src="http://i.imgur.com/9EgPkqg.png" width="646" height="346" title="preact+photon">


---


## Usage

```js
import { h, render } from 'preact';
import { Header, Title, Footer, Button } from 'preact-photon';

/** Example app component */
const App = () => (
	<div id="app">
		<Header>
			<Title>Great App</Title>
			<Button icon="home">Home</Button>
		</Header>

		<section>
			Hello there.
		</section>

		<Footer>
			<span>Some great content here.</span>
		</Footer>
	</div>
);

render(<App />, document.body);
```

## Quick Start App

See [preact-photon-electron-quick-start](https://github.com/alexkrolick/preact-photon-electron-quick-start) for a batteries-included starter app.

---

## License

[MIT]

---

`*` ... though I haven't tested it.

[photon]: https://github.com/connors/photon
[preact]: https://github.com/developit/preact
[MIT]: http://choosealicense.com/licenses/mit