developit / Preact Slots
🕳 Render Preact trees into other Preact trees, like portals.
Stars: ✭ 156
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Preact Slots
Next Todos
200 lines realtime todos app powered by next.js, preact, jet, redux and now
Stars: ✭ 117 (-25%)
Mutual labels: preact
Tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Stars: ✭ 2,694 (+1626.92%)
Mutual labels: preact
Preact Scroll Viewport
Preact Component that renders homogeneous children only when visible
Stars: ✭ 118 (-24.36%)
Mutual labels: preact
Freactal
Clean and robust state management for React and React-like libs.
Stars: ✭ 1,676 (+974.36%)
Mutual labels: preact
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+1385.26%)
Mutual labels: preact
Made With Webassembly
A showcase of awesome production applications, side projects, and use cases made with WebAssembly (Wasm). 👷
Stars: ✭ 132 (-15.38%)
Mutual labels: preact
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-12.18%)
Mutual labels: preact
Preact Cycle
♻️ Minimal functional Virtual DOM rendering using Preact 🚲
Stars: ✭ 120 (-23.08%)
Mutual labels: preact
Preact And Typescript
Some simple patterns for Typescript usage with Preact
Stars: ✭ 127 (-18.59%)
Mutual labels: preact
Omil
📝Webpack loader for Omi.js React.js and Rax.js components 基于 Omi.js,React.js 和 Rax.js 单文件组件的webpack模块加载器
Stars: ✭ 140 (-10.26%)
Mutual labels: preact
Razzle
✨ Create server-rendered universal JavaScript applications with no configuration
Stars: ✭ 10,547 (+6660.9%)
Mutual labels: preact
Preact Async Route
Async route component for preact-router
Stars: ✭ 132 (-15.38%)
Mutual labels: preact
Tui.grid
🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
Stars: ✭ 1,859 (+1091.67%)
Mutual labels: preact
preact-slots
Render Preact trees into other Preact trees, like portals.
Install
preact-slots is available on npm:
npm install --save preact-slots
Usage
Define "holes" in your appliation using <Slot name="foo" />
,
then fill them using <SlotContent slot="foo">some content</SlotContent>
:
import { SlotProvider, Slot, SlotContent } from 'preact-slots'
render(
<SlotProvider>
<div>
<Slot name="foo">
Some Fallback Content
</Slot>
<SlotContent slot="foo">
Replacement Content
</SlotContent>
</div>
</SlotProvider>
)
The above renders <div>Replacement Content</div>
.
An extended example follows:
import { Slot, SlotContent, SlotProvider } from 'preact-slots'
const Header = () => (
<header class="header">
<Slot name="title">Slots Demo</Slot>
<Slot name="toolbar">
{ items => items && <nav>{items}</nav> }
</Slot>
</header>
)
const EditPage = ({ page, content, onSave, onCancel }) => (
<div class="page-editor">
<SlotContent slot="title">Editing {page}</SlotContent>
<SlotContent slot="toolbar">
<button onClick={onSave}>Save</button>
<button onClick={onCancel}>Cancel</button>
</SlotContent>
<textarea value={content} />
</div>
)
render(
<SlotProvider>
<div class="app">
<Header />
<EditPage />
</div>
</SlotProvider>
)
Similar Libraries
Slots are a concept that has been around for a while.
In particular, @camwest's react-slot-fill is similar to preact-slots, but geared towards React.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].