Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @stickyants/react-slot with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactSlot = require("@stickyants/react-slot")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@stickyants/react-slot v1.1.0

A simple library package to provide Slot functionality for React apps

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free