Vue like slot layout

react-slotus

Install

npm install --save react-slotus

yarn add  react-slotus

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.

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.

Prepare 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>
  );
};

Use in app with replaced layout parts!

// 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>
  );
};

Optionally allow Replace 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. 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>
  );
};

License

MIT © kolengri