mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
50fb671b66
* docs: add ADRs
* docs/adrs
* fix: update developer guide
* fix: add space
* Update website/docs/contributing/backend/overview.md
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
* docs: remove auto-generated sidebar
This should've been in .gitignore, but has only been ignored to the
ignore file for the website subdirectory. (This has been fixed on main.)
* docs: delete empty file
* Revert "docs: delete empty file"
This reverts commit 2435f173ff.
* docs: add frontmatter to new dev docs
* Docs(fix): add quotes around page titles
In yaml, the colon is a special character, so we need to use quotes.
* docs: fix remaining titles
* Update website/docs/contributing/backend/overview.md
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
* fix: update empty ADR
* fix: update text to reflect postgres 12
* fix: update backend overview
* fix: remove link
* fix: add form ADR
Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
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.
|