ReactScene

ReactScene

Source:

Methods

(static) useFrame(props) → {ReactFrameResult}

Source:
Name Type Description
props Reactive.FrameReactiveData Can be used as frame, cssText, cssObject, etc.
Example
import { useFrame } from "react-scenejs";

const frame = useFrame("text-align: center; transform: translate(10px, 10px);");

frame.camelCasedCSSObject;
Returns:
- You can use Frame methods and cssText, cssObject, ...etc
Type
ReactFrameResult

(static) useNowFrame(item) → {ReactNowFrameResult}

Source:
Name Type Description
item SceneItem item to get the current frame
Example
import { useSceneItem, useNowFrame } from "react-scenejs";

const sceneItem = useSceneItem(...);
const frame = useNowFrame(sceneItem);

frame.camelCasedCSSObject;
Returns:
- You can use Frame methods and cssText, cssObject, ...etc State
Type
ReactNowFrameResult

(static) useScene(propsopt, optionsopt) → {ReactSceneResult}

Source:
Name Type Description
props? Reactive.SceneReactiveProps Items and properties that make up the scene
options? Partial<SceneOptions> Scene and Animator options
Example
import { useScene, useNowFrame } from "react-scenejs";

const scene = useScene({ ... });
const frame = useNowFrame(scene.getItem("a1"));

frame.camelCasedCSSObject;
Returns:
- You can use Scene methods and Animator State
Type
ReactSceneResult

(static) useSceneItem(propsopt, optionsopt)

Source:
Name Type Description
props? Reactive.SceneItemReactiveProps Items and properties that make up the scene item
options? Partial<SceneItemOptions> SceneItem and Animator options
Example
import { useSceneItem, useNowFrame } from "react-scenejs";

const item = useSceneItem({ ... });
const frame = useNowFrame(item);

frame.camelCasedCSSObject;
Returns:
- You can use SceneItem methods and Animator State.

Type Definitions

ReactFrameResult

Source:
See:
Properties:
cssText
cssText: string
Returns the frame's cssText.
cssObject
cssObject: Record<string, any>
Returns the frame's css object (kebab-case).
camelCasedCSSObject
camelCasedCSSObject: Record<string, any>
Returns an object in camel case type of frame. It can be used in React.
You can use reactive state and frame methods.
Type:
  • TSInterface

ReactNowFrameResult

Source:
Properties:
cssText
cssText: string
Returns the frame's cssText.
cssObject
cssObject: Record<string, any>
Returns the frame's css object (kebab-case).
camelCasedCSSObject
camelCasedCSSObject: Record<string, any>
Returns an object in camel case type of frame. It can be used in React.
Type:
  • TSInterface

ReactSceneItemResult

Source:
Properties:
duration optional
duration?: number
The duration property defines how long an animation should take to complete one cycle.
fillMode optional
fillMode?: "none" | "forwards" | "backwards" | "both"
The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount optional
iterationCount?: "infinite" | number
The iterationCount property specifies the number of times an animation should be played.
easing optional
easing?: array | function
The easing(timing-function) specifies the speed curve of an animation.
delay optional
delay?: number
The delay property specifies a delay for the start of an animation.
direction optional
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"
The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
totalDuration
totalDuration: number
Total time the animation played
Type:
  • TSInterface

ReactSceneResult

Source:
Properties:
duration optional
duration?: number
The duration property defines how long an animation should take to complete one cycle.
fillMode optional
fillMode?: "none" | "forwards" | "backwards" | "both"
The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount optional
iterationCount?: "infinite" | number
The iterationCount property specifies the number of times an animation should be played.
easing optional
easing?: array | function
The easing(timing-function) specifies the speed curve of an animation.
delay optional
delay?: number
The delay property specifies a delay for the start of an animation.
direction optional
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"
The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
totalDuration
totalDuration: number
Total time the animation played
Type:
  • TSInterface