react-slot-component

Vue inspired slot like high order component for React


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.

$3

`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 (


`tsx
// App.tsx
import React from 'react';

import { SlotExampleComponent } from './SlotExampleComponent';

export const App = () => {
return (

slotOneProp1="slotOneProp1Value"
slotOneProp2="slotOneProp2Value"
>
SlotOneChildrenValue

data-test="SlotTwo"
slotTwoProp1="slotTwoProp1Value"
slotTwoProp2="slotTwoProp2Value"
>
SlotTwoChildrenValue

SlotExampleChildrenValue

);
};
``

$3

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

License

MIT © kolengri