Modern React Snippets

Modern React Snippets is a must-have tool for React developers who use JetBrains IDEs such as IntelliJ IDEA, WebStorm, or PhpStorm. With Modern React Snippets, you can use custom snippets and templates for React that can be easily inserted into your code, saving you time and effort on repetitive tasks.

If you find Modern React Snippets helpful, please take a moment to leave a review on the JetBrains plugin marketplace. Your feedback helps me improve the plugin and provide better features and support to all users.

I appreciate your support and value your input. Your review will help other developers discover the benefits of using Modern React Snippets and make their React coding experience even more productive and enjoyable.

Thank you for choosing Modern React Snippets, and happy coding!

Snippets

The ⇥ means the TAB key

Creation React Snippets

Trigger	Description
rpcp→	Create a react class pure Component with propTypes
rpce→	Create a react class export pure component
rpc→	Create a react class pure component
rmcp→	Create a react function memo component with propTypes
rmc→	Create a react function memo component
rfcreduxp→	Create a react function memo component redux propTypes
rfcredux→	Create a react function memo component redux
rfcp→	Create a react function component with propTypes
rfce→	Create a react function export component
rfc→	Create a react function component
reduxmap→	mappingToProps
redux→	importReduxConnect
rcreduxp→	Create a react class component redux propTypes
rcredux→	Create a react class component redux
rcontext→	Create context
rconst→	Create a class constructor
rcep→	Create a react class export component with propTypes
rce→	Create a react class export component
rccp→	Create a react class component with propTypes
rcc→	Create a react class component
rafcp→	Create a react arrow function component with propTypes
rafce→	Create a react arrow function export component
rafc→	Create a react arrow function component

React tools Snippets

Trigger	Description
useStateSnippet→	Use state
useRefSnippet→	Use ref
useReducerSnippet→	Use reducer
useEffectSnippet→	Use effect
useContextSnippet→	Use context
useCallbackSnippet→	Use call back

Creation Typescript React Snippets

Trigger	Description
tsrpce→	Create a typescript react class export pure component
tsrpc→	Create a typescript react class pure component
tsrnfs→	Create a typescript react native arrow function component with styles
tsrnf→	Create a typescript react native arrow function component
tsrfce→	Create a typescript react function export component
tsrfc→	Create a typescript react function component
tsrcredux→	Create a typescript react class component redux
tsrce→	Create a typescript react class export component
tsrcc→	Create a typescript react class component
tsrafce→	Create a typescript react arrow function export component
tsrafc→	Create a typescript react arrow function component

React Native Snippets

Trigger	description
rnstyle→	react native styles
rnpce→	Create a react native pure component export
rnpc→	Create a react native pure component
rnfs→	Create a react native function component with styles
rnfes→	Create a react native function export component with styles
rnfe→	Create a react native function export component
rnf→	Create a react native function component
rncs→	Create a react native class component with styles
rnce→	Create a react native class export component
rnc→	Create a react native class component

Importing snippets

Trigger	Description
imrr→	Import browser router with route and navLink
imrpcp→	Import react with pure component and propTypes
imrpc→	Import react with pure component
imrn→	Import from react native
imrmp→	Import react with memo and propTypes
imrm→	Import react with memo
imrd→	Import react dom
imrcp→	Import react with component and propTypes
imrc→	Import react with component
imr→	Import react
impt→	Import propTypes
imp→	Import
imn→	Import Module name
ime→	Import everything
imd→	Import destructing
imbrs→	Import router switch
imbrnl→	Import router nav link
imbrl→	Import router link
imbrc→	Import router setup
imbr→	Import browser router
ima→	Import as

Other snippets

Trigger	Description
anfn→	Anonymous function
bnd→	Bind this
cas→	Console assert
tpf→	Typeof snippet
tita→	It async block
tit→	It block
testa→	Test async block
test→	Test block
sto→	Set timeout
sti→	Set interval
stest→	Set react text
state→	Component State
sst→	Component set state object
ssf→	Component set state function
srtest→	Setup react component test with redux
sntest→	Setup react native test
snrtest→	Setup react native test with redux
scu→	Should component update
rxslice→	Redux slice
rxselect→	Redux select
rxreducer→	Redux reducer
rxconst→	Redux const
rxaction→	Redux action
ptsr→	PropType string required
ptshr→	PropType shape required
ptsh→	PropType shape
pts→	PropType string
ptor→	PropType object required
ptoor→	PropType objectOf required
ptoo→	PropType objectOf
pto→	PropType object
ptnr→	PropType number required
ptn→	PropType number
ptndr→	PropType node required
ptnd→	PropType node
ptir→	PropType instanceOf required
pti→	PropType instanceOf
ptfr→	PropType function required
ptf→	PropType function
ptexr→	PropType exact required
ptex→	PropType exact
ptetr→	PropType oneOfType required
ptet→	PropType oneOfType
pter→	PropType enum required
pte→	PropType enum
ptelr→	PropType element required
ptel→	PropType element
ptbr→	PropType bool required
ptb→	PropType bool
ptar→	PropType array required
pta→	PropType array
ptaor→	PropType arrayOf required
ptao→	PropType arrayOf
ptany→	PropType any
pse→	Property set
props→	Component props
prom→	Promise
pge→	Property get
nfn→	Named function
met→	Method
hocredux→	Hoc component with redux
hoc→	Hoc component
gsbu→	Get snapshot before update
gdsfp→	Get derived state from props
fre→	For each
fof→	For of
fin→	For in
exptp→	Export type
expint→	Export interface
exp→	Export default
exd→	Export destructing
exa→	Export as
est→	Empty state
enf→	Export named function
ednf→	Export default named function
edf→	Export default function
dob→	Destructing object
desc→	Describe block
dar→	Destructing array
cwun→	Component will unmount
cwa→	Console warn
ctr→	Console trace
ctm→	Console time
ctl→	Console table
cte→	Console time end
cs→	Destruct state
cref→	Create ref
cp→	Destruct props
cmmb→	Comment big block
clo→	Console log object
clj→	Console log JSON
clg→	Console log
cin→	Console info
cgr→	Console group
cge→	Console group end
cer→	Console error
cdup→	Component did update
cdm→	Component did mount
cdi→	Console dir
cco→	Console count
ccl→	Console clear

Installation

---

• Using IDE built-in plugin system:

  Settings/Preferences > Plugins > Marketplace > Search for "Modern React Snippets" > Install Plugin

---

• Manually: Download the latest release and install it manually using Settings/Preferences > Plugins > ⚙️ > Install plugin from disk...

---

Inspiration

This project is a rebuild of ES7+ React/Redux/React-Native snippets for Jetbrains IDEs.