Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 7 days ago
JSON representation

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

Awesome Lists containing this project

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