How could I create a custom target?

[Darmody]

I want to create a target for remaxjs，how could I do that? For now I just fork remax-spring for alternative.

[harshagarwalnyu]

react-spring v9+ splits into a renderer-agnostic core (@react-spring/core) and platform-specific packages. Creating a custom target means implementing the platform primitives.

Minimal custom target structure:

// 1. Create an Animated host using @react-spring/core
import { createStringInterpolator, Globals } from '@react-spring/shared';
import { createHost } from '@react-spring/core';

// Define which element props are animatable
const primitives = {
  View: RemaxView,    // your Remax component
  Text: RemaxText,
  // ... other Remax primitives
};

// createHost connects react-spring's animation engine to your components
const { animated, useSpring, useTransition, /* etc */ } = createHost(primitives, {
  // Interpolator for CSS-like string values ("0px 10px" → "5px 10px")
  createStringInterpolator,

  // Optional: handle special prop transforms
  applyAnimatedValues: (instance, props) => {
    if (typeof instance.setNativeProps === 'function') {
      instance.setNativeProps(props);
    } else {
      Object.assign(instance, props);
    }
  },
});

export { animated, useSpring, useTransition };

Usage after creating:

import { animated, useSpring } from './remax-spring';

function MyComponent() {
  const style = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.View style={style}>Hello</animated.View>;
}

Reference implementation: look at @react-spring/native (React Native target) — it's the simplest existing target and shows exactly what applyAnimatedValues needs to handle for non-DOM environments. The Remax target would be nearly identical since Remax maps to WeChat MiniProgram which has a similar native view model.

The remax-spring fork you mentioned is the right direction — wrapping createHost with Remax primitives is all that's needed.