react-slot-component

Vue inspired slot like high order component for React

Install

npm install --save react-slot-component

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

// 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 (
    <div>
      {slotProps.SlotOne ? (
        <div>
          <div>{slotProps.SlotOne.slotOneProp1}</div>
          <div>{slotProps.SlotOne.slotOneProp2}</div>
          <div>{slotProps.SlotOne.children}</div>
        </div>
      ) : (
        <div data-test="SlotOneDefaultContent">SlotOneDefaultContentValue</div>
      )}
      {slotProps.SlotTwo ? (
        <div>
          <div>{slotProps.SlotTwo.slotTwoProp1}</div>
          <div>{slotProps.SlotTwo.slotTwoProp2}</div>
          <div>{slotProps.SlotTwo.children}</div>
        </div>
      ) : (
        <div>SlotTwoDefaultContentValue</div>
      )}

      {children}
    </div>
  );
});

Use in app with replaced layout parts

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

import { SlotExampleComponent } from './SlotExampleComponent';

export const App = () => {
  return (
    <SlotExampleComponent {...args}>
      <SlotExampleComponent.SlotOne
        slotOneProp1="slotOneProp1Value"
        slotOneProp2="slotOneProp2Value"
      >
        SlotOneChildrenValue
      </SlotExampleComponent.SlotOne>
      <SlotExampleComponent.SlotTwo
        data-test="SlotTwo"
        slotTwoProp1="slotTwoProp1Value"
        slotTwoProp2="slotTwoProp2Value"
      >
        SlotTwoChildrenValue
      </SlotExampleComponent.SlotTwo>
      SlotExampleChildrenValue
    </SlotExampleComponent>
  );
};

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