react-extract.nvim

Neovim plugin for extracting JSX into a new React component.

Requires Neovim >= 0.7

✨ 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

💻 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.

🔧 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.

✂️ 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.

⚠️ Indent inconsistencies can occur while using visual character mode. ⚠️

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!

Contributing

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

🚧 TODO

• infer type from original identifiers if possible