https://github.com/developit/preact-photon

:rocket: Beautiful desktop apps with Preact + Photon :heart:
https://github.com/developit/preact-photon

desktop desktop-app electron photon preact preact-photon ui ui-kit

Last synced: about 1 month ago
JSON representation

:rocket: Beautiful desktop apps with Preact + Photon :heart:

• Host: GitHub
• URL: https://github.com/developit/preact-photon
• Owner: developit
• License: mit
• Created: 2015-10-17T04:01:15.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-05-02T00:56:39.000Z (over 5 years ago)
• Last Synced: 2024-07-08T00:04:27.163Z (2 months ago)
• Topics: desktop, desktop-app, electron, photon, preact, preact-photon, ui, ui-kit
• Language: JavaScript
• Homepage: http://npm.im/preact-photon
• Size: 42 KB
• Stars: 172
• Watchers: 4
• Forks: 23
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-preact - Preact Photon - Build beautiful desktop UI with [photon](http://photonkit.com). (Uncategorized / Uncategorized)

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/))_



---

## Usage

```js

import { h, render } from 'preact';

import { Header, Title, Footer, Button } from 'preact-photon';

/** Example app component */

const App = () => (

	


		

			Great App

			Home

		


		

			Hello there.

		

		

			Some great content here.

		

	

);


render(, 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