preact-views
Named views for Preact, with easy-as-pie linking between them!
preact-views provides a <Views /> 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 <Link /> component.
Note:
preact-viewsis simple and does not do orchestration or routing for you. If you're looking for a URL router, try preact-router.
See a Real-world Example ➡️
Complete Example
import { Views, Link } from 'preact-views';
import { h, render } from 'preact';
const Home = () => (
<div>
<h1>Home!</h1>
<Link to="other" params={{ value:1 }}>Go Other</Link>
</div>
);
const Other = ({ value=0 }) => (
<div>
<h1>Other.</h1>
<Link to="home">Go Home</Link>
<p>value is {value}.</p>
<Link to="other" params={{ value: value+1 }}>Increment</Link>
</div>
);
render((
<Views view="home">
<Home name="home" />
<Other name="other" />
</Views>
), document.body);Simple Example
import Views from 'preact-views';
import { h, render } from 'preact';
render((
<Views view="one">
<div name="one">one</div>
<div name="two">two</div>
</Views>
), document.body);
// renders a div containing the text "one"