score:1

Accepted answer

best way would be to use the react.fc type. this will inject the children variable. you can also set the default variables inside the function parameters.

import react from "react";
import { suspense } from "react";
import loading from "../loading/loading";

interface lazyloadcompprops {
  height?: string;
  width?: string;
}

const lazyload: react.fc<lazyloadcompprops> = ({children, height = "300px", width = "300px"}) => {
  return (
    <suspense fallback={<loading height={height} width={width} />}>
      {children}
    </suspense>
  );
};

export default lazyload;

score:0

to solve this i add the required and optional parameters in 2 different interfaces and then extends to another interface the optional and required like this:

import react from "react";
import { suspense } from "react";
import loading from "../loading/loading";

interface lazyloadrequiredprops {
  children  :    react.reactnode;
}

interface lazyloadoptionalprops {
  height   ?:    string;
  width    ?:    string;
}

interface lazyloadprops extends lazyloadrequiredprops, lazyloadoptionalprops {}

const defaultprops: lazyloadoptionalprops = {
  height: "300px",
  width:  "300px",
}

const lazyload = (props: lazyloadprops) => {
  const {children, height, width} = props;

  return (
    <suspense fallback={<loading height={height} width={width} />}>
      {children}
    </suspense>
  );
};

lazyload.defaultprops = defaultprops;

export default lazyload;

i see this example from the following source: https://dev.to/fullstackchris/react-with-typescript-optional-props-with-default-values-33nc


Related Query

More Query from same tag