How to allow only certain string values for component props in Nextjs using TypeScript?

Originally posted here!

To allow only certain string values for a prop when using Nextjs with Typescript, you can make use of the string literal union type in TypeScript.

TL;DR

/* Square.tsx file */

// String literal Union Type
// for colors `blue`, `red`, or `green`
type Colors = "blue" | "red" | "green";

// and setting the type Colors to prop color
const Square = (props: { color: Colors }) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

For example, let's say we have a component called Square which will render a square shape in the browser and we need the user to able to set the color for the square shape. But we don't want the user to set any color, only the three colors like blue, red, or green. Here we will use the string literal union type in TypeScript.

So first, let's make a component called Square like this,

/* Square.tsx file */

const Square = () => {
  return (
    <div>
      <div className="square">I'm a Square Shape</div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

So we have made the component Square.

Now we need a prop to get the color from the user, so let's name the prop also color and set the value of the prop as the value of the background-color property like this,

/* Square.tsx file */

const Square = (props) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

Now we need to restrict the user to set only the colors blue, red, or green. So now we can make a string literal union type for these colors like this,

/* Square.tsx file */

// String literal Union Type
// for colors `blue`, `red`, or `green`
type Colors = "blue" | "red" | "green";

const Square = (props) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

We have defined a type called Colors, we can now set this type to the color prop like this,

/* Square.tsx file */

// String literal Union Type
// for colors `blue`, `red`, or `green`
type Colors = "blue" | "red" | "green";

// and setting the type Colors to prop color
const Square = (props: { color: Colors }) => {
  // destructuring color from props object
  const { color } = props;

  return (
    <div>
      {/* Setting color prop value as background color */}
      <div className="square" style={{ backgroundColor: color }}>
        I'm a Square Shape
      </div>

      <style>{`
        {/* Setting the shape like a square */}
        .square{
          width: 100px;
          height: 100px;
        }
      `}</style>
    </div>
  );
};

// exporting component
export default Square;

Now the user can only pass either one of the blue, red, or green colors to the color prop.

See the above code live in codesandbox

Feel free to share if you found this useful 😃.

---