How not to reexplicit instance components properties in generic components?

Question

In react, I implement generic components like this :

export function CustomTextInput(props) {
    return (
        <TextInput
            placeholder={props.placeholder}
            onChangeText={props.onChangeText}
            style={{margin:20}}
        />
    )
}

And them I use them like this :

      <CustomTextInput
        placeholder="My placeholder"
        onChangeText={secretCode => setSecretCode(secretCode)}
      />

Is there a way not to have to re-explicit each property in the generic components ? For example, by defining generic components like that :

export function CustomTextInput(props) {
    return (
        <TextInput
            props={props}
            style={{margin:20}}
        />
    )
}

... while still keeping the same implementation for component instances.

Answer 1

I created a pretty generic stopwatch implementation a while back.

type StopwatchAction = "START" | "STOP" | "RESET" | "END";

function createStopwatch(
  control$: Observable<StopwatchAction>, 
  interval = 1000
): Observable<number>{

  return defer(() => {
    let toggle: boolean = false;
    let count: number = 0;

    const ticker = timer(0, interval).pipe(
      map(x => count++)
    );
    const end$ = of("END");

    return concat(
      control$,
      end$
    ).pipe(
      catchError(_ => end$),
      switchMap(control => {
        if(control === "START" && !toggle){
          toggle = true;
          return ticker;
        }else if(control === "STOP" && toggle){
          toggle = false;
          return EMPTY;
        }else if(control === "RESET"){
          count = 0;
          if(toggle){
            return ticker;
          }
        }
        return EMPTY;
      })
    );
  });
}

Using this is just a matter of hooking the correct events into a stream of StopwatchActions. This example only sends "START" and "RESET" based on button clicks, but you can merge in "STOP" and "END" as well.

For example:

createStopwatch(merge(
  fromEvent(startBtn, 'click').pipe(mapTo("START")),
  fromEvent(resetBtn, 'click').pipe(mapTo("RESET"))
)).subscribe(seconds => {
  secondsField.innerHTML  = seconds % 60;
  minuitesField.innerHTML = Math.floor(seconds / 60) % 60;
  hoursField.innerHTML    = Math.floor(seconds / 3600);
});