Create custom component using reactive

[sandheep45]

I am trying to create a custom Input component using reactive and here is the code i am using to do so

i have taken some reference for the below code from here

import { BindKeys, reactive } from "@legendapp/state/react";
import { Input, InputProps } from "../ui/input";
import { ChangeEvent, createElement } from "react";

const bindInfoOneWay: BindKeys = {
  value: {
    handler: "onChange",
    getValue: (e: ChangeEvent<HTMLInputElement>) => e.target.value,
    defaultValue: "",
  },
};

const ReactiveInput = reactive(
  (props: InputProps) => createElement(Input, props),
  [],
  bindInfoOneWay,
);

export default ReactiveInput;

i have alseo tried the following code as well (taken reference from here)

import { reactive } from "@legendapp/state/react";
import { Input, InputProps } from "../ui/input";

const ReactiveInput = reactive(
  (props: InputProps) => <Input {...props} />,
);

export default ReactiveInput;

but both of the above appraoch doesn't seem to work. The Input component which i am importing from ../ui/input is the input component from shadcn ui and i have mentioned the code below

import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }

This is the kind of implementation (two way binding) i want to acheive

const App = () => {
  const inputState$ = useObservable("");
  return (
    <div>
      <ReactiveInput $value={inputState$} />
      {inputState$.get()}
    </div>
  );
};

I am also getting the following error from the ReactiveInput

Property '$value' does not exist on type 'IntrinsicAttributes & Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & RefAttributes<...>, "ref">, never> & {}'. Did you mean 'value'? ts (2322) [8, 22]

I am not getting if am i doing something wrong or am i missing something somewhere or it's something else. Any kind of help is highly appreciated.

[sandheep45]

I figured out the issue in my code. I didn't wrap the App component inside observer, silly me. Though it needed to make some changes for the two-way implementation to work (thanks to the code writtern for$React namespace ). Here is the full functional code

//  ReactiveInput.tsx
import { BindKeys, FCReactive, reactive } from "@legendapp/state/react";
import { Input, InputProps } from "../ui/input";
import { ChangeEvent, createElement } from "react";

type IReactive = FCReactive<typeof Input, InputProps>;

const bindInfoOneWay: BindKeys = {
  value: {
    handler: "onChange",
    getValue: (e: ChangeEvent<HTMLInputElement>) => e.target.value,
    defaultValue: "",
  },
};

const ReactiveInput = reactive(
  (props: InputProps) => createElement(Input, props),
  [],
  bindInfoOneWay,
) as unknown as IReactive;

export default ReactiveInput;

// App.tsx
const App = observer(() => {
  const inputState$ = useObservable("");
  return (
    <div>
      <ReactiveInput $value={inputState$} />
      {inputState$.get()}
    </div>
  );
});