react-slotz

KO | EN

gitlite — search

#ai #llm #golang #machine-learning #deep-learning #linux #nodejs #java #cli #kubernetes #vue #security #openai #open-source

(★ 9)

React slots with hooks and functional components

react-slotz Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Slotz

Teleport React components to anywhere in the react-tree.

> Modernized from [react-slot-fill](https://github.com/camwest/react-slot-fill)

## Installation

```bash
npm install @marimo-team/react-slotz
# or
pnpm install @marimo-team/react-slotz
```

## Example

```tsx
// slotz.js
const Toolbar = () => {
  return (
    <nav>
      <Slot name="Toolbar.Item" />
    </nav>
  );
};
Toolbar.Item = ({ label }: { label: string }) => (
  <Fill name="Toolbar.Item">
    <button>{label}</button>
  </Fill>
);

// my-page.js
const Feature = () => {
  return (
    <div>
      <Toolbar.Item label="Home 2" />
      <Toolbar.Item label="About" />
      <Footer.Item label="Twitter" href="twitter.com/reactjs" />
    </div>
  );
};

const MyPage = () => {
  return (
    <Provider>
      <div className="main">
        <Toolbar />
        <Footer />
        <Feature />
      </div>
    </Provider>
  );
};

// HTML
<div className="main">
  <nav>
    <button>Home 2</button>
    <button>About</button>
  </nav>
  <footer>
    <a href="twitter.com/reactjs">Twitter</a>
  </footer>
  <div />
</div>;
```

react-slotz

react-slotz Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-slotz

react-slotz Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README