beqa/react-slots - Responsible React Parenting

react-slots empowers you to prioritize composability in your component APIs.

Featuring

- Lightweight (< 8KB
minified, < 3KB minified & gzipped)
- Composability with ease
- Type-safety
- Server Components support
- Not implemented with context
- Intuitive API
- Self-documenting with typescript
- Elegant solution to a11y attributes
- Inversion of control

Installation

The installation process consists of two parts: installing the core library
(around 3KB gzipped piece of code that runs in your users' browsers and
handles the core logic) and an optional compile-time plugin (for transpiling
JSX syntax for your slot elements into regular function invocations).

Installation steps

Docs

You can find the docs on the
docs website

Discord

If you need any assistance, feel free to join our
Discord server

Implementing

``tsx import { useSlot, SlotChildren, Slot } from "@beqa/react-slots";

type ListItemProps = { children: SlotChildren< | Slot<"title"> // Shorthand of Slot<"title", {}> | Slot<"thumbnail"> // Shorthand of Slot<"thumbnail", {}> | Slot<{ isExpanded: boolean }> // Shorthand of Slot<"default", {isExpanded: boolean}> >; };

function ListItem({ children }: ListItemProps) { const { slot } = useSlot(children); const [isExpanded, setIsExpanded] = useState();

return ( className={${isExpanded ? "expanded" : "collapsed"}} onClick={() => setIsExpanded(!isExpanded)} > {/ Render thumbnail if provided, otherwise nothing/}


        {/ Render a fallback if title is not provided/}
        Expand for more
        {/ Render the description and pass the prop up to the parent /}


    
  );
}


Specifying Slot Content From the Parent

With slot-name attribute

`jsx

A title


  this is a description


With Templates

`jsx import { template } from "beqa/react-slots";

A title {({ isExpanded }) => isExpanded ? A description : "A description" } doesn't have to be a function ;`

With type-safe templates

`tsx // Option #1 import { createTemplate } from "@beqa/react-slots"; const template = createTemplate();

// Option #2 import { template, CreateTemplate } from "@beqa/react-slots"; const template = template as CreateTemplate;

// Typo-free and auto-complete for props! A title {({ isExpanded }) => isExpanded ? A description : "A description" } doesn't have to be a function ;`

`Advanced Examples`

| The code samples below represent actual implementations. No need to define external state or event handlers for these components to function. | | --------------------------------------------------------------------------------------------------------------------------------------------- |

`$3`

Checkout live example

`jsx First Accordion This part of Accordion is hidden Second Accordion AccordionList makes it so that only one Accordion is open at a time Third Accordion No external state required`

`$3`

Checkout live example

`jsx


    Look Ma, No External State
    ... And no event handlers.

    Closes automatically on button click.

    Can work with external state if desired.

          slot-name="secondary"
      onClick={() => alert("But how are the button variants different?")}
    >
      Close??

If you like this project please show support by starring it on
Github

beqa/react-slots - Responsible React Parenting

react-slots empowers you to prioritize composability in your component APIs.

Featuring

Installation

Installation steps

Docs

You can find the docs on the
docs website

Discord

If you need any assistance, feel free to join our
Discord server

Implementing

``tsx import { useSlot, SlotChildren, Slot } from "@beqa/react-slots";

function ListItem({ children }: ListItemProps) { const { slot } = useSlot(children); const [isExpanded, setIsExpanded] = useState();

return ( className={${isExpanded ? "expanded" : "collapsed"}} onClick={() => setIsExpanded(!isExpanded)} > {/ Render thumbnail if provided, otherwise nothing/}


        {/ Render a fallback if title is not provided/}
        Expand for more
        {/ Render the description and pass the prop up to the parent /}


    
  );
}


Specifying Slot Content From the Parent

With slot-name attribute

`jsx

A title


  this is a description


With Templates

`jsx import { template } from "beqa/react-slots";

A title {({ isExpanded }) => isExpanded ? A description : "A description" } doesn't have to be a function ;`

With type-safe templates

`tsx // Option #1 import { createTemplate } from "@beqa/react-slots"; const template = createTemplate();

// Option #2 import { template, CreateTemplate } from "@beqa/react-slots"; const template = template as CreateTemplate;

// Typo-free and auto-complete for props! A title {({ isExpanded }) => isExpanded ? A description : "A description" } doesn't have to be a function ;`

`Advanced Examples`

`$3`

Checkout live example

`jsx First Accordion This part of Accordion is hidden Second Accordion AccordionList makes it so that only one Accordion is open at a time Third Accordion No external state required`

`$3`

Checkout live example

`jsx


    Look Ma, No External State
    ... And no event handlers.

    Closes automatically on button click.

    Can work with external state if desired.

          slot-name="secondary"
      onClick={() => alert("But how are the button variants different?")}
    >
      Close??

If you like this project please show support by starring it on
Github