mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-28 19:06:12 +01:00
ad7c139992
This PR puts our contributing guidelines in the sidebar of the unleash documentation. Currently there was no way of navigating to them easily, which made our contribution guides and ADRs less useful. This PR adds them to the sidebar as their own category, and adds an ADR for domain centric language. Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
38 lines
1.1 KiB
Markdown
38 lines
1.1 KiB
Markdown
---
|
|
title: "ADR: Preferred component props usage"
|
|
---
|
|
|
|
## Background
|
|
|
|
In the codebase, we have found a need to standardise how to use props, in order to easily be able to figure out what a component is doing and what properties it is given without having to look up the interface.
|
|
|
|
## Decision
|
|
|
|
We have decided to use props destructuring inline in components in order to quickly display what properties a component is using.
|
|
|
|
```tsx
|
|
// Do:
|
|
const MyComponent = ({ name, age, occupation }: IComponentProps) => {
|
|
return (
|
|
<div>
|
|
<p>{age}</p>
|
|
<p>{name}</p>
|
|
<p>{occupation}</p>
|
|
</>
|
|
)
|
|
};
|
|
|
|
// Don't:
|
|
function MyComponent(props) {
|
|
return (
|
|
<div>
|
|
<p>{props.age}</p>
|
|
<p>{props.name}</p>
|
|
<p>{props.occupation}</p>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
The reason for this decision is to remove mental clutter and free up capacity to easily navigate the codebase. In addition, when components grow, the ability to look at the signature and instantly know what dependencies this component uses gives you an advantage when scanning the codebase.
|