React Buddy

Compatible with IntelliJ IDEA Ultimate, AppCode and 8 more
Screenshot 2

React Buddy helps developing applications based on React.js and related libraries. Provides component palettes for MUI (MaterialUI), Ant Design, Chakra UI, Mantine. Helps to create and use Storybook stories.

Coding Assistance

  • Event handler generation
  • useRef generation
  • JSX lists generation (.map postfix completion, quick fix for array-like objects)
  • State generation
    • Intention to convert local variable to useState
    • Quick-fix to create state variable from non-existing symbol passed to a JSX prop
    • .state postfix completion
  • New component creation action
  • Live templates for React hooks
    • usest - useState
    • usee - useEffect
    • usec - useContext
    • userd - useReducer
    • usecb - useCallback
    • usem - useMemo
    • user - useRef
    • useih - useImperativeHandle
    • usele - useLayoutEffect
    • usedv - useDebugValue
  • Quick-fix for adding new props (TS declarations) straight from JSX
  • Intention to wrap a handler in useCallback(). Quick fix detecting missing deps (switched off when eslint integration enabled)
  • Intention to surround a JSX element with condition
  • Intention to wrap a functional component in React.memo()
  • Gutter icons designating React hooks and handlers

Interactive Component Preview

  • Preview the particular component, not the whole app
  • Navigate to the source code by clicking on any element in the preview
  • See component re-renders
  • Highlight selected component in the preview
  • Tested support for projects based on Vite, Next.js (10+) and Create React App

JSX Outline

  • Observe React components structure (JSX, hooks, handlers)
  • Navigate to/from the particular JSX element
  • Copy-paste and move JSX nodes
  • Add conditional rendering
  • Insert components from the Palette

Components Palette

Palette tool window activates when a tsx/jsx file is opened. Alternatively you can browse palette via code generation action (Alt + Insert / ⌘ N)

  • Observe available components/reusable blocks. Preview each component right in the IDE
  • Drag and drop components from the palette to the source code / JSX outline
  • Double click on the component to add it to the source code
  • Configure your own palette or use the predefined ones
  • We provide several ready-to-use palettes. The plugin detects supported libraries/versions and suggests to install the corresponding package:
    • MUI - @react-buddy/palette-mui demo
    • Ant Design - @react-buddy/palette-antd demo
    • Chakra UI - @react-buddy/palette-chakra-ui demo
    • Mantine (core + form) - @react-buddy/palette-mantine demo
    • React Intl @react-buddy/palette-react-intl demo

Component Inspector

  • View and search through selected element's properties
  • Change properties using visual components
  • Generate handlers

App Component Tree

  • View hierarchy of React application components
  • View paths of components used in (react router) routing

Storybook support

  • Storybook components tool-window (displays stories defined inside the project)
  • Code generation by Storybook stories (d'n'd from the tool window / use code generation action)
  • Intention to create a story for React component
  • Live templates for story creation (story6, story7)
  • CSF 3 (Storybook 7) support
  • MDX format support

Ant Design support

  • Visual designer for Antd Form.Item validation rules

Quick Start

Open any file containing React components. In order to use preview functionality @react-buddy/ide-toolbox dependency should be added and some configuration should be done in the project. The plugin will suggest to add all required files automatically.

See the documentation to configure the preview manually.

Requirements

The plugin supports projects based on React.js (16.5+) and preact. Better experience is provided for TypeScript-based projects.

Find us at

react-buddy.com
twitter.com/reactbuddy
discord

What’s New

Unfortunately, JetBrains s.r.o. didn’t leave any update notes.
Feb 06, 2025
Version 251.20015.29

Getting Started

  • Install the plugin and open a project based on React.js and TypeScript.
  • Wait until the project indexing is finished.
  • Open any *.tsx file. The React Buddy tool windows will appear on the right hand side.

Most features of the plugin work without any setup. For some features like per-component preview you need to set-up your project.

Rating & Reviews

4.7
38 Ratings (591,413 Downloads)
5
4
3
2
1

Ken Ma

14.12.2024

This helps a lot, impressive!

+2

darth pixel

30.10.2024

There is still a lot to do in this plugin. 3* because it has a potential but as for now it's not usable for me. It's IMO in kinda early stage. Stiff and rough. It needs a hand from JetBrains UI designers.

+1

锦鸿 郑

04.09.2024

Doesn't seem to support next14. The preview function cannot be used

+2

Additional Information

Vendor:
Plugin ID:
com.haulmont.rcb