How to allow only certain string values for component props in Nextjs using TypeScript?
Tags: nextjs
Published: 2021-04-29 00:00:00

---
  title: How to allow only certain string values for component props in Nextjs using TypeScript?
  published: true
  tags: Nextjs
  date: Thu Apr 29 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/allow-certain-string-values-props-nextjs-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-edc55d0d68ae30f53311f81eef1c692f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/allow-certain-string-values-props-nextjs-typescript)
  
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

```jsx
/* 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,

```jsx
/* 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,

```jsx
/* 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,

```jsx
/* 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,

```jsx
/* 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](https://codesandbox.io/s/allow-certain-string-values-for-props-nextjs-typescript-slenp?file=/components/Square.tsx)

### Feel free to share if you found this useful 😃.

---