Please use React Slot Component
npm install --save react-slotus
yarn add react-slotus
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.
Use SlotFactory.Layout to create own layout. Use SlotFactory.Reserve to mark a default replaceable slot in it. Use SlotFactory.Replace to replace a default slot while using your layout.
// Layout.tsx
import * as React from 'react';
import { createSlotLayout } from 'react-slotus';
// Describe you future slots name in generic createSlotLayout function
export const SlotFactory = createSlotLayout<'Header' | 'Content' | 'Footer'>();
export interface LayoutProps {
children: React.ReactNode;
}
export const Layout: React.FC<LayoutProps> = (props) => {
const { children } = props;
return (
<SlotFactory.Layout>
{/**
* Pass children before Reserve components is important!
*/}
{children}
<SlotFactory.Reserve name='Header'>Header</SlotFactory.Reserve>
<SlotFactory.Reserve name='Content'>Content</SlotFactory.Reserve>
<SlotFactory.Reserve name='Footer'>Footer</SlotFactory.Reserve>
</SlotFactory.Layout>
);
};
// App.tsx
import React from 'react';
import { Layout, SlotFactory } from './Layout';
export const App = () => {
return (
<Layout>
<SlotFactory.Replace name='Header'>Replace Header</SlotFactory.Replace>
<SlotFactory.Replace name='Content'>Replace Content</SlotFactory.Replace>
<SlotFactory.Replace name='Footer'>Replace Footer</SlotFactory.Replace>
</Layout>
);
};
This is especially useful for route transitions, where you briefly have both routes in DOM at the same time. In example below, "Replace Header 2" will be rendered
// App.tsx
import React from 'react';
import { Layout, SlotFactory } from './Layout';
export const App = () => {
return (
<Layout>
<SlotFactory.Replace name='Header'>Replace Header 1</SlotFactory.Replace>
<SlotFactory.Replace name='Header'>Replace Header 2</SlotFactory.Replace>
</Layout>
);
};
MIT © kolengri