Question 72510 in Reactjs Question posted in
The new location for the React Documentation can be found here.

In React, how to constrain a prop to be passed only once per value – Reactjs

type DndBoxProps = React.PropsWithChildren<{
  accepts?: any[];
  // "all" 
  // "left" | "right" | "top" | "bottom"
  edge?: string[];
}>

If I pass ‘all’, then cannot pass ‘top’, ‘right’, ‘left’, ‘bottom’.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the reply! I don't think this solution of yours is good enough.

    edges={{edges:['bottom','bottom']} will silence

    // ==== This has the same check as your answer =============

    type E =  "left" | "right" | "top" |  "bottom"

type DndBoxProps = React.PropsWithChildren<{
  accepts?: any[];

  edge?: ["all"] | E[] ;
}>;

    // =====I have now changed it to==============================

    type DndBoxProps = React.PropsWithChildren<{
  accepts?: any[];
  top?: boolean;
  right?: boolean;
  bottom?: boolean;
  left?: boolean;
  
}>;

  2. 0

    You can add custom type using discriminating union

    type EdgeType = 'all' | 'left' | 'right' | 'top' | 'bottom';

type Edge =
    | { edges: ['all'] }
    | { edges: Exclude<EdgeType, 'all'>[] }

type DndBoxProps = React.PropsWithChildren<{
    accepts?: any[];
    edgeConfig?: Edge;
}>;

export function DndBox(props: DndBoxProps) {
    return (
        <>
            {props.edgeConfig?.edges.map((edge) => {
                return <h3>{edge}</h3>
            })}
        </>
    )
}

    This way <DndBox edgeConfig={{edges: ['all', 'left']}} /> – will raise error

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search