Skip to content

Commit

Permalink
[docs] Add generic props usage examples (mui#19341)
Browse files Browse the repository at this point in the history
  • Loading branch information
fyodore82 authored and EsoterikStare committed Feb 13, 2020
1 parent fe1ccf6 commit 1dea483
Showing 1 changed file with 37 additions and 2 deletions.
39 changes: 37 additions & 2 deletions docs/src/pages/guides/typescript/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -270,8 +270,43 @@ prop, this will be detailed in the component's API documentation.
For example, a Button's root node can be replaced with a React Router's Link, and any additional props that are passed to Button, such as `to`, will be spread to the Link component.
For a code example concerning Button and react-router-dom checkout [these demos](/guides/composition/#routing-libraries).

Not every component fully supports any component type you pass in. If you encounter a
component that rejects its `component` props in TypeScript please open an issue.
To be able to use props of such a Material-UI component on their own, props should be used with type arguments. Otherwise, the `component` prop will not be present in the props of the Material-UI component.

The examples below use `TypographyProps` but the same will work for any component which has props defined with `OverrideProps`.

The following `CustomComponent` component has the same props as the `Typography` component.

```ts
function CustomComponent(props: TypographyProps<'a', { component: 'a' }>) {
/* ... */
}
```

Now the `CustomComponent` can be used with a `component` prop which should be set to `'a'`. In addition, the `CustomComponent` will have all props of a `<a>` HTML element. The other props of the `Typography` component will also be present in props of the `CustomComponent`.

It is possible to have generic `CustomComponent` which will accept any React component, custom and HTML elements.

```ts
function GenericCustomComponent<C extends React.ElementType>(
props: TypographyProps<C, { component?: C }>,
) {
/* ... */
}
```

Now if the `GenericCustomComponent` will be used with a `component` prop provided, it should also have all props required by the provided component.

```ts
function ThirdPartyComponent({ prop1 } : { prop1: string }) {
return <div />
}
// ...
<GenericCustomComponent component={ThirdPartyComponent} prop1="some value" />;
```

The `prop1` became required for the `GenericCustomComponent` as the `ThirdPartyComponent` has it as a requirement.

Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue.
There is an ongoing effort to fix this by making component props generic.

## Handling `value` and event handlers
Expand Down

0 comments on commit 1dea483

Please sign in to comment.