https://github.com/kolengri/react-slot-component

🧇 Make your react components sweet again! Type safe Vue like slots for react
https://github.com/kolengri/react-slot-component

components helper layouts react rendering slots templates typescript

Last synced: about 2 months ago
JSON representation

🧇 Make your react components sweet again! Type safe Vue like slots for react

• Host: GitHub
• URL: https://github.com/kolengri/react-slot-component
• Owner: kolengri
• License: mit
• Created: 2021-04-08T11:51:13.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-02T11:51:53.000Z (about 2 years ago)
• Last Synced: 2024-10-13T19:08:37.417Z (2 months ago)
• Topics: components, helper, layouts, react, rendering, slots, templates, typescript
• Language: TypeScript
• Homepage:
• Size: 1.08 MB
• Stars: 12
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-slot-component

## Vue inspired slot like high order component for React

[![NPM](https://img.shields.io/npm/v/react-slot-component.svg)](https://www.npmjs.com/package/react-slot-component)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Badges](https://badgen.net/npm/license/react-slot-component)](https://www.npmjs.com/package/react-slot-component)

[![Badges](https://badgen.net/npm/dependents/react-slot-component)](https://www.npmjs.com/package/react-slot-component)

[![Badges](https://badgen.net/npm/types/react-slot-component)](https://www.npmjs.com/package/react-slot-component)

[![Badges](https://badgen.net/github/issues/kolengri/react-slot-component)](https://www.npmjs.com/package/react-slot-component)

[![Badges](https://badgen.net/bundlephobia/min/react-slot-component)](https://bundlephobia.com/result?p=react-slot-component)

[![Badges](https://badgen.net/bundlephobia/minzip/react-slot-component)](https://bundlephobia.com/result?p=react-slot-component)

## Install

```bash

npm install --save react-slot-component

```

```bash

yarn add react-slot-component

```

## Usage

The aim of this package is to end up with annoying practice of passing the subcomponents to the layouts using properties. The package allows you to create and use layouts with replaceable default slots with pure JSX/TSX syntax.

### Prepare your Layout

```tsx

// SlotExampleComponent.tsx

import * as React from 'react';

import { withSlots } from 'react-slot-component';

export type SlotExampleComponentProps = {};

// Describe you future slots name with props

export type SlotExampleComponentSlots = {

  SlotOne: {

    children: React.ReactNode;

    slotOneProp1: string;

    slotOneProp2: string;

  };

  SlotTwo: {

    children: React.ReactNode;

    slotTwoProp1: string;

    slotTwoProp2: string;

  };

};

export const SlotExampleComponent = withSlots<

  SlotExampleComponentSlots,

  SlotExampleComponentProps

>(props => {

  const {

    children,

    // All future slot props passed via slotProps prop

    slotProps,

  } = props;

  return (

    


      {slotProps.SlotOne ? (

        


          
{slotProps.SlotOne.slotOneProp1}

          
{slotProps.SlotOne.slotOneProp2}

          
{slotProps.SlotOne.children}

        

      ) : (

        
SlotOneDefaultContentValue

      )}

      {slotProps.SlotTwo ? (

        


          
{slotProps.SlotTwo.slotTwoProp1}

          
{slotProps.SlotTwo.slotTwoProp2}

          
{slotProps.SlotTwo.children}

        

      ) : (

        
SlotTwoDefaultContentValue

      )}


      {children}

    

  );

});

```


### Use in app with replaced layout parts

```tsx

// App.tsx

import React from 'react';

import { SlotExampleComponent } from './SlotExampleComponent';

export const App = () => {

  return (

    

      

        SlotOneChildrenValue

      

      

        SlotTwoChildrenValue

      

      SlotExampleChildrenValue

    

  );

};

```

### Optionally allow replace slot components with same name to override each other

This is especially useful for route transitions, where you briefly have both routes in DOM at the same time.

## License

MIT © [kolengri](https://github.com/kolengri)