Currently, the old transform (`"runtime": "classic"`) is the default option. To enable the new transform, you can pass `{"runtime": "automatic"}` as an option to `@babel/plugin-transform-react-jsx` or `@babel/preset-react`:
Currently, the old transform `{"runtime": "classic"}` is the default option. To enable the new transform, you can pass `{"runtime": "automatic"}` as an option to `@babel/plugin-transform-react-jsx` or `@babel/preset-react`:
```js
// If you are using @babel/preset-react
@ -192,7 +192,7 @@ If you are using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugi
### TypeScript {#typescript}
TypeScript supports the JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
TypeScript supports the new JSX transform in [v4.1 beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories).
>Keep in mind that the codemod output will not always match your project's coding style, so you might want to run [Prettier](https://prettier.io/) after the codemod finishes for consistent formatting.
Running this codemod will:
* Remove all unused React imports as a result of upgrading to the new JSX transform.
The `onFocus` event is called when the element (or some element inside of it) receives focus. For example, it's called when the user clicks on a text input.
@ -163,7 +163,7 @@ function Example() {
}
```
#### onBlur
#### onBlur {#onblur}
The `onBlur` event handler is called when focus has left the element (or left some element inside of it). For example, it's called when the user clicks outside of a focused text input.
@ -180,7 +180,7 @@ function Example() {
}
```
#### Detecting Focus Entering and Leaving
#### Detecting Focus Entering and Leaving {#detecting-focus-entering-and-leaving}
You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.