Skip to content

Releases: grlt-hub/react-slots

4.0.0-beta.1

Choose a tag to compare

@binjospookie binjospookie released this 07 Jun 19:37
v4.0.0-beta.1

chore: release v4.0.0-beta.1

4.0.0-beta.0

Choose a tag to compare

@binjospookie binjospookie released this 07 Jun 09:25
v4.0.0-beta.0

chore: release v4.0.0-beta.0

3.1.0

Choose a tag to compare

@binjospookie binjospookie released this 06 Nov 09:18
657002e

Added

  • Now when supports any Unit from Effector. (#11)

Changed

  • Component return type from React.JSX.Element to React.ReactNode. (#10)

Big thanks to @TheCoffeeFox for spotting the type improvements!

3.0.1

Choose a tag to compare

@binjospookie binjospookie released this 05 Nov 10:32
5ceb7ea

Fixed

  • use clean-publish

3.0.0

Choose a tag to compare

@binjospookie binjospookie released this 05 Nov 10:32
5ceb7ea

Changed

  • BREAKING: component field renamed to Component (capital C) to enable React hooks usage in inline components without ESLint warnings

  • BREAKING: API structure changed to target-first approach

    Before (v2):

    slotsApi.insert.into.Description({ component: MyComponent });

    After (v3):

    slotsApi.Description.insert({ Component: MyComponent });

    Benefits:

    • Discoverability: Type slotsApi. to see all available slots, then slotsApi.[SlotName]. to see all actions for that slot
    • Logical grouping: All methods for a specific slot are in one place

Added

  • clear method to clear all components from a slot

Migration from v2 to v3

  1. Replace slotsApi.insert.into.[SlotName] with slotsApi.[SlotName].insert
  2. Replace component: with Component: in all insert calls

Example:

// v2
slotsApi.insert.into.Header({ component: MyComponent });

// v3
slotsApi.Header.insert({ Component: MyComponent });

2.0.0

Choose a tag to compare

@binjospookie binjospookie released this 04 Nov 19:07
aa9e123

Changed

  • renamed fn to mapProps

Added

  • when parameter to defer slot insertion until specified Effector events fire
const userLoaded = createEvent<{ id: number }>();

slotsApi.insert.into.Header({
  when: userLoaded, // Wait for event
  mapProps: (slotProps, whenPayload) => ({ userId: whenPayload.id }),
  component: (props) => <UserWidget id={props.userId} />,
});

userLoaded({ id: 123 }); // Component inserted now