react-extract.nvim

Neovim plugin for extracting JSX into a new React component.

Requires Neovim >= 0.7

:sparkles: Features

• distinction between JS and TS files
• configurable component templates for JS / TS
• preserves correct indentation
• autoimport of the new component (using Neovim's built-in LSP and tsserver)
• identifiers in extracted code are passed as props to the new component (requires nvim-treesitter)
• extracting to new file / current file
• easily configurable

:computer: Installation

Use your preferred plugin manager, e.g. vim-plug.

Plug "napmn/react-extract.nvim"

It is recommended to have treesitter and tsserver for Neovim's built-in LSP installed to support all available features.

:wrench: Setup and configuration

Run setup function in your init.lua file:

require("react-extract").setup()

Optionally you can provide a table of options to override the defaults:

-- Using setup function with default values
require("react-extract").setup({
  ts_type_property_template = "[INDENT][PROPERTY]: any\n",
  ts_template_before =
    "type [COMPONENT_NAME]Props = {\n[TYPE_PROPERTIES]}\n[EMPTY_LINE]\n"
    .. "export const [COMPONENT_NAME]: React.FC<[COMPONENT_NAME]Props> = "
    .. "([PROPERTIES]) => {\n"
    .. "[INDENT]return (\n",
  ts_template_after = "[INDENT])\n}",
  js_template_before =
    "export const [COMPONENT_NAME] = "
    .. "([PROPERTIES]) => {\n"
    .. "[INDENT]return (\n",
  js_template_after = "[INDENT])\n}",
  jsx_indent_level = 2,
  use_class_props = false,
  use_autoimport = true,
  autoimport_defer_ms = 350,
  local_extract_strategy = "BEFORE"
})

You can read more about available options and their meaning in the docs.

Example configurations (e.g. for class component) can be found in examples.

:scissors: Usage

Map extract_to_new_file / extract_to_current_file function to your preferred mapping, e.g.:

vim.keymap.set({ "v" }, "<Leader>re", require("react-extract").extract_to_new_file)
vim.keymap.set({ "v" }, "<Leader>rc", require("react-extract").extract_to_current_file)

For extracting first select part of JSX that you want to extract. Recommended way is using visual line mode.

:warning: Indent inconsistencies can occur while using visual character mode. :warning:

Then use your mapped key, enter path where the new component should be created (or enter name of the new component if extracting to current file) and that's it!

:octocat: Contributing

All PRs / Issues with possible enhancements or found bugs are welcomed and appreciated.

:construction: TODO

• [ ] infer type from original identifiers if possible