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

📺 Named views for Preact, with easy-as-pie linking between them.
https://github.com/developit/preact-views

preact preact-components preact-router routing

Last synced: 28 days ago
JSON representation

📺 Named views for Preact, with easy-as-pie linking between them.

• Host: GitHub
• URL: https://github.com/developit/preact-views
• Owner: developit
• License: mit
• Created: 2017-02-21T03:45:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-24T19:48:36.000Z (about 4 years ago)
• Last Synced: 2024-10-05T04:08:31.555Z (about 1 month ago)
• Topics: preact, preact-components, preact-router, routing
• Language: JavaScript
• Homepage: https://jsfiddle.net/developit/jz95kc33/
• Size: 5.86 KB
• Stars: 39
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# preact-views

[![NPM](http://img.shields.io/npm/v/preact-views.svg)](https://www.npmjs.com/package/preact-views)

[![travis-ci](https://travis-ci.org/developit/preact-views.svg)](https://travis-ci.org/developit/preact-views)

**Named views for [Preact], with easy-as-pie linking between them!**

`preact-views` provides a `` component that renders its children only when their `name` prop is selected as the current "view". The current view name can be set via a prop, or automatically through the provided `` component.

> **Note:** `preact-views` is simple and does not do orchestration or routing for you. If you're looking for a URL router, try [preact-router](https://github.com/developit/preact-router).

#### [See a Real-world Example :arrow_right:](https://jsfiddle.net/developit/jz95kc33/)

---

### Complete Example

```js

import { Views, Link } from 'preact-views';

import { h, render } from 'preact';

const Home = () => (

	


		
Home!

		Go Other

	

);


const Other = ({ value=0 }) => (

	


		
Other.

		Go Home

		
value is {value}.

		Increment

	

);


render((

	

		

		

	

), document.body);

```

[**See it running :arrow_right:**](https://jsfiddle.net/developit/jz95kc33/)

---

### Simple Example

```js

import Views from 'preact-views';

import { h, render } from 'preact';

render((

	

		
one

		
two

	

), document.body);


// renders a div containing the text "one"

```

---

### License

[MIT]

[Preact]: https://github.com/developit/preact

[MIT]: http://choosealicense.com/licenses/mit/