Replace React default imports with destructured named imports

This pattern replaces React default import method references (e.g. React.ReactNode) with destructured named imports (import { ReactNode } from 'react'). Running this will also make sure that React is imported.

Apply with the Grit CLI

grit apply react_named_imports

Replace method on React default import

Given the following interface with React global:

BEFORE

import React from 'react';

interface MyComponentProps {
  children: React.ReactNode;
  anotherProp?: boolean;
}

The result should import the relevant module:

AFTER

import React from 'react';
import { ReactNode } from 'react';

interface MyComponentProps {
  children: ReactNode;
  anotherProp?: boolean;
}

Patterns such as unused_imports can be used to clean up the duplicate import.

Replace React global

Given the following interface with React global:

BEFORE

interface MyComponentProps {
  children: React.ReactNode;
  anotherProp?: boolean;
}

The result should import the relevant module:

AFTER

import { ReactNode } from 'react';

interface MyComponentProps {
  children: ReactNode;
  anotherProp?: boolean;
}