## Vue inspired slot like high order component for React
npm install react-slot-component







``bash`
npm install --save react-slot-component
`bash`
yarn add react-slot-component
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.
`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 (
{children}
$3
`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
);
};
``This is especially useful for route transitions, where you briefly have both routes in DOM at the same time.
MIT © kolengri