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
- useStateusee
- useEffectusec
- useContextuserd
- useReducerusecb
- useCallbackusem
- useMemouser
- useRefuseih
- useImperativeHandleusele
- useLayoutEffectusedv
- 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:
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.
Ken Ma
14.12.2024This helps a lot, impressive!