Don't create conflicting props
Tags: react
Published: 2019-01-10 10:04:11

---
title: Don't create conflicting props
published: true
description: Naming event handlers is easy, until you put all your components together.
tags: reactjs
---


> This is part of a series of posts about writing component API for great developer experience.
>
> This post was originally posted on [my newsletter](https://sid.studio/newsletter) a few weeks ago, just saying.

This is one of the easier ones:

We have a button here:

![button-1](https://sid.studio/blog/21/button-1.png)

```jsx
<Button>Click me</Button>
```



You probably also need a primary button to serve as your main action on a page. I used to like shaping the API just like you would say it - "Give me a primary button"



![button-2](https://sid.studio/blog/21/button-2.png)

```jsx
<Button>Click me</Button>
<Button primary>Click me</Button>
```



So pretty.

Now, as it goes with buttons, you probably need a few more. Here's what the props table ends up looking like:

| name          | description                                                | type      | default |
| :------------ | :--------------------------------------------------------- | :-------- | :------ |
| `primary`     | used to indicate the main action                           | `boolean` | false   |
| `secondary`   | used for actions which are less important                  | `boolean` | false   |
| `destructive` | indicate that the user should be cautious, example: delete | `boolean` | false   |
| `link`        | used to style button similarly to a hyperlink              | `boolean` | false   |

There are multiple props that can be used to change the appearance of the button. What is the expected outcome if someone uses them together?



![button-3](https://sid.studio/blog/21/button-3.png)

```jsx
<Button primary destructive>
  Click me
</Button>
```



Will one of them win, which one? Is it dependent on the order?

I would always ask: Why would someone write that? Is this even a real use case - "Give me a primary destructive button"?

Most of the times, this would be by mistake. But, if the developers have to ask questions like the ones above, it's probably not a good API.

As someone who is deciding the API, it's your job to:

1. minimise mistakes
2. minimise confusions around the API

So here's tip #1 for you: _Don't create conflicting props_

We can fix our above code pretty easily by using one prop which allows a list of options: `appearance`



![button-4](https://sid.studio/blog/21/button-4.png)

```jsx
<Button appearance="default">Click me</Button>
<Button appearance="primary">Click me</Button>
<Button appearance="destructive">Click me</Button>
```



We can add a list of supported `appearance` using [prop-types](https://reactjs.org/docs/typechecking-with-proptypes.html).

```js
Button.PropTypes = {
  appearance: PropTypes.oneOf(['default', 'primary', 'secondary', 'link', 'destructive'])
}
```

Now, even if the developer makes a mistake, they will get a helpful warning on their developer tools.



![button-1](https://sid.studio/blog/21/button-1.png)

```jsx
<Button appearance="danger">Click me</Button>
```

```error
Warning: Failed prop type:
Invalid prop `appearance` of value `danger` supplied to `Button`,
expected one of `["default","primary","secondary","link","destructive"]`
in Button
```



This tip is pretty easy to implement, but will make your API a lot easier to use (and maintain).

Hope this was helpful on your journey

Sid

---

[![newsletter](https://cdn.hashnode.com/res/hashnode/image/upload/v1544503948215/SJE5fp2JV.png)](https://sid.studio/newsletter)