Documentation
Base
Models
Event

Event

Events can use into any Configurable component, that be used with each parent component (for example, Event was be mounted with each story if pass Event to Configurable.Story)

The EventProps interface extends React's PropsWithChildren and includes an optional property for specifying the HTMLElement to which the event is attached. It is designed to be used with components that need to handle events. It extends React.PropsWithChildren, allowing you to pass children to the component along with event-related properties.

By understanding the Event and EventProps and its properties, you can effectively handle events in your components, ensuring that event listeners are correctly managed and attached to the appropriate elements.

Properties

PropertyTypeDescription
elementHTMLElement or nullThis property specifies the HTML element that can be accessed on current usable level of components (ex. HTMLDialogElement of viewer, if use in Configurable.Viewer).
childrenReact.ReactNodeAll children on this level of components (ex. all children of viewer, if use in Configurable.Viewer).

Create

import { type EventProps } from "@react-instastories/base";
 
import React from "react";
 
function CustomEvent({ children }: EventProps) {
  // Any own inner content of event for logic
  const viewer = useViewerContext();
 
  React.useEffect(() => {
    const handleEvent = (event: Event) => console.debug(event);
 
    if (viewer.shown) {
      window.addEventListener("blur", handleEvent);
      window.addEventListener("focus", handleEvent);
    } else {
      window.removeEventListener("blur", handleEvent);
      window.removeEventListener("focus", handleEvent);
    }
 
    return () => {
      window.removeEventListener("blur", handleEvent);
      window.removeEventListener("focus", handleEvent);
    };
  }, [viewer.shown]);
 
  // Add any own children, change or pass default children prop
  return children;
}

Usage

<InstaStories>
  <Configurable.Container>
    <Configurable.Viewer events={[CustomEvent]} />
  </Configurable.Container>
  {...stories}
</InstaStories>

Demo

Keyboard Event

Pointer Event

AnimationTransition