Miss any of our Open RFC calls?Watch the recordings here! »

@stickyants/react-slot

1.1.0 • Public • Published

stickyants-react-slot

A library for React application to support slots. Works in a similar fashion to Vue's slots.

Usage

 
import * as React from 'react';
import {
  SlotsContainer,
  Slot,
  SlotContent
  } from '@stickyants/react-slot';
 
 
function MySidebar(){
  return (
    <SlotContent name="sidebar">
      <div className="text">This is just a test</div>
    </SlotContent>
  );
}
 
function MySubApp(){
  return (
    <SlotContent name="working-area">
      <div className="my-working-area">This goes in the working area</div>
    </SlotContent>
  );
}
 
function App(){
  return (
    <SlotContainer>
      <div clasName="container">
        <div className="row">
          <div className="col-md-3">
            <Slot name="sidebar" />
          </div>
          <div className="col-md-9">
            <Slot name="working-area" />
          </div>
        </div>
      </div>
      <MySidebar />
      <MySubApp />
    </SlotContainer>
  );
}
 

Install

npm i @stickyants/react-slot

DownloadsWeekly Downloads

9

Version

1.1.0

License

ISC

Unpacked Size

11.9 kB

Total Files

9

Last publish

Collaborators

  • avatar