Skip to content

Commit

Permalink
chore: Format (typescript-cheatsheets#476)
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon authored Dec 13, 2021
1 parent fc8f152 commit 65240f2
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 13 deletions.
21 changes: 9 additions & 12 deletions docs/basic/getting-started/forward-create-ref.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,21 +55,19 @@ export const FancyButton = React.forwardRef((
If you are grabbing the props of a component that forwards refs, use [`ComponentPropsWithRef`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L770).

## Generic forwardRefs

Read more context in https://fettblog.eu/typescript-react-generic-forward-refs/:

### Option 1 - Wrapper component

```ts
type ClickableListProps<T> = {
items: T[];
onSelect: (item: T) => void;
mRef?: React.Ref<HTMLUListElement> | null;
};

export function ClickableList<T>(
props: ClickableListProps<T>
) {
export function ClickableList<T>(props: ClickableListProps<T>) {
return (
<ul ref={props.mRef}>
{props.items.map((item, i) => (
Expand All @@ -82,7 +80,7 @@ export function ClickableList<T>(
);
}
```

### Option 2 - Redeclare forwardRef

```ts
Expand All @@ -93,7 +91,6 @@ declare module "react" {
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}


// Just write your components like you're used to!

type ClickableListProps<T> = {
Expand All @@ -118,11 +115,11 @@ function ClickableListInner<T>(

export const ClickableList = React.forwardRef(ClickableListInner);
```

## More Info
- https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315

- https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315

You may also wish to do [Conditional Rendering with `forwardRef`](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/167).

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new).
1 change: 0 additions & 1 deletion docs/migration/from-js.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ Old content that is possibly out of date
- [Incrementally Migrating JS to TS][clayallsop] (old)
- [Microsoft's TypeScript React Conversion Guide][mstsreactconversionguide] (old)


[clayallsop]: https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88 "Incrementally Migrating JavaScript to TypeScript"
[pleo]: https://medium.com/pleo/migrating-a-babel-project-to-typescript-af6cd0b451f4 "Migrating a Babel project to TypeScript"
[tiny]: https://go.tiny.cloud/blog/benefits-of-gradual-strong-typing-in-javascript/ "Benefits of gradual strong typing in JavaScript"
Expand Down

0 comments on commit 65240f2

Please sign in to comment.