Home Original page

GitHub - minwe/jetbrains-react: React.js live templates for JetBrains editors.

React snippets(live templates) for JetBrains series editors (e.g. WebStorm, PHPStorm, IntelliJ IDEA, etc.), stolen from sublime-react and phpstorm-reactjs.

Installation

Import Automatically

  1. Download settings.jar;
  2. Click File -> Importing Settings... on your IDE menu, select settings.jar, then click OK.

Install Manually

  1. Download(save as...) and copy the jetbrains/templates/ReactJS.xml file to your templates folder:
  • Windows: <your home directory>\.<product name><version number>\config\templates
  • Linux: ~\.<product name><version number>\config\templates
  • OS X: ~/Library/Preferences/<product name><version number>/templates

e.g. ~/Library/Preferences/WebStorm10/templates on OS X for WebStorm 10

  1. Restart your IDE.

  2. To see all templates, go to Preferences -> Live Templates and expand the ReactJS Template Group.

Usage

It's hard to remember shortcuts when there are a large number of options. A more efficient way is to take advantage of editor's Insert Live Template shortcut. Press Cmd + J and type as many letters as you want to filter the results.

For example, to create a new React class, type rcc and press Tab or press Cmd + J and write rcc or React.

The WebStorm official blog post:

Tips:

Documentation of available snippets:

rcls

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class $COMPONENT$ extends Component {
  static defaultProps = {
    $START$
  };

  static propTypes = {
  };

  state = {
  };

  render() {
    return (
      <div>$END$</div>
    );
  }
}

export default $COMPONENT$;

rpc

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class $COMPONENT$ extends PureComponent {
  static defaultProps = {
    $START$
  };

  static propTypes = {
  };

  render() {
    return (
      <div>$END$</div>
    );
  }
}

export default $COMPONENT$;

rpfc

import React from 'react';
import PropTypes from 'prop-types';

function $COMPONENT$($PARAMETER$) {
  return (
    <div>$END$</div>
  );
}

$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};

export default $COMPONENT$;

rpfc5

'use strict';

var React = require('react');
var PropTypes = require('prop-types');

function $COMPONENT$($PARAMETER$) {
  return (
    <div>$END$</div>
  );
}

$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};

module.exports = $COMPONENT$;

rpfcaf

import React from 'react';
import PropTypes from 'prop-types';

const $COMPONENT$ = ($PARAMETER$) => {
  return (
    <div>$END$</div>
  );
};

$COMPONENT$.propTypes = {};
$COMPONENT$.defaultProps = {};

export default $COMPONENT$;

rcc

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

const $COMPONENT$ = createReactClass({
  render() {
    return (
      <div>$END$</div>
    );
  }
});

export default $COMPONENT$;

rcc5

'use strict';

var React = require('react');
var createReactClass = require('create-react-class');
var PropTypes = require('prop-types');

var $COMPONENT$ = createReactClass({
  render: function() {
    return (
      <div>$END$</div>
    );
  }
});

module.exports = $COMPONENT$;

rdom

import ReactDOM from 'react-dom';
$END$

rdom5

var ReactDOM = require('react-dom');
$END$

rccc

$START$ = createReactClass({
  render() {
    return (
      $END$
    );
  }
});

rccc5

$START$ = createReactClass({
  render: function() {
    return (
      $END$
    );
  }
});

cdm

componentDidMount() {
  $END$
}

cdm5

componentDidMount: function() {
  $END$
},

cdu

componentDidUpdate(prevProps, prevState) {
  $END$
}

cdu5

componentDidUpdate: function(prevProps, prevState) {
  $END$
},

cwm

componentWillMount() {
  $END$
}

cwm5

componentWillMount: function() {
  $END$
},

uscwm

UNSAFE_componentWillMount() {
  $END$
}

uscwm5

UNSAFE_componentWillMount: function() {
  $END$
},

cwr

componentWillReceiveProps(nextProps) {
  $END$
}

cwr5

componentWillReceiveProps: function(nextProps) {
  $END$
},

uscwr

UNSAFE_componentWillReceiveProps(nextProps) {
  $END$
}

uscwr5

UNSAFE_componentWillReceiveProps: function(nextProps) {
  $END$
},

uscwu

UNSAFE_componentWillUpdate(nextProps, nextState) {
  $END$
}

uscwu5

UNSAFE_componentWillUpdate: function(nextProps, nextState) {
  $END$
},

cwu

componentWillUpdate(nextProps, nextState) {
  $END$
}

cwu5

componentWillUpdate: function(nextProps, nextState) {
  $END$
},

cwum

componentWillUnmount() {
  $END$
}

cwum5

componentWillUnmount: function() {
  $END$
},

gsbu

getSnapshotBeforeUpdate(prevProps, prevState) {
  $END$
}

gsbu5

getSnapshotBeforeUpdate: function(prevProps, prevState) {
  $END$
},

cdc

componentDidCatch() {
  $END$
}

cdc5

componentDidCatch: function() {
  $END$
},

dn

dnp

$START$.displayName = '$END$';

fdn

rfdn

ReactDOM.findDOMNode($END$);

rcp

ReactDOM.createPortal($START$, $END$);

rhy

ReactDOM.hydrate($START$, $END$);

rucan

ReactDOM.unmountComponentAtNode($END$);

fup

gdp

getDefaultProps() {
  return {
    $END$
  };
}

gdp5

getDefaultProps: function() {
  return {
    $END$
  };
},

gis

getInitialState() {
  return {
    $START$: $END$
  };
}

gis5

getInitialState: function() {
  return {
    $START$: $END$
  };
},

ism

props

dprp

const { $END$ } = this.props;

dsih

dangerouslySetInnerHTML={{__html: '$END$'}}

pts

propTypes: {
  $START$: PropTypes.$END$,
},

pt

$START$: PropTypes.$END$,

refs

ren

render() {
  return (
    <div>$END$</div>
  );
}

ren5

render: function() {
  return (
    <div>$END$</div>
  );
}

scu

shouldComponentUpdate(nextProps, nextState) {
  $END$
}

scu5

shouldComponentUpdate: function(nextProps, nextState) {
  $END$
},

sst

this.setState({
  $START$: $END$,
});

fsst

this.setState((prevState) => {
  return $END$;
});;

state

dst

const { $END$ } = this.state;

ct

contextTypes: {
  $START$: PropTypes.$END$,
},

cct

childContextTypes: {
  $START$: PropTypes.$END$,
},

ctx

gcc

getChildContext() {
  return {
    $START$: $END$
  };
}

gcc5

getChildContext: function() {
  return {
    $START$: $END$
  };
},

st

state = {
  $START$: $END$,
},

sdn

static displayName = '$END$';

spt

static propTypes = {
  $START$: PropTypes.$END$,
};

sdp

static defaultProps = {
  $START$: $END$,
};

sct

static contextTypes = {
  $START$: PropTypes.$END$,
};

scct

static childContextTypes = {
  $START$: PropTypes.$END$,
};

sgds

static getDerivedStateFromProps(nextProps, prevState) {
  $END$
},

cstt

constructor(props$START$) {
  super(props$END$);
}

tsn

tsa

tse

tsl

tset

transitionEnterTimeout={$END$}

tslt

transitionLeaveTimeout={$END$}

tsat

transitionAppearTimeout={$END$}

rdoms

import ReactDOMServer from 'react-dom/server';
$END$

rdoms5

var ReactDOMServer = require('react-dom/server');
$END$

rdsrts

ReactDOMServer.renderToString($END$);

rdsrtsm

ReactDOMServer.renderToString($END$);

rdsrtns

ReactDOMServer.renderToNodeStream($END$);

rdsrtsns

ReactDOMServer.renderToStaticNodeStream($END$);

rsm

<React.StrictMode>
  $END$
</React.StrictMode>

rf

<React.Fragment>
  $END$
</React.Fragment>

rfs

rcr

rfr

React.forwardRef((props, ref) => {
  return $END$;
});

rcctx

const { Provider, Consumer } = React.createContext($END$);

ctxprvd

<Provider value={$START$}>
  $END$
</Provider>

ctxcsm

<Consumer>
  {value => $END$}
</Consumer>

oncp

onct

onpt

oncpse

oncpss

onCompositionStart={$END$}

oncpsu

onCompositionUpdate={$END$}

onkd

onps

onku

onfs

onbl

oncg

onip

onsb

onc

oncm

ondc

ondg

ondge

ondgetr

ondget

ondgl

ondgo

ondgst

ondp

onmd

onme

onml

onmm

onmot

onmov

onmu

onsl

ontc

onte

ontm

onts

onsl

onwl

onabt

oncpl

oncpt

ondc

onempt

onekpt

onend

onldd

onldmd

onls

onpaus

opl

onplg

onpgs

onrc

onsked

onskin

onstd

onsupd

ontu

onvc

onwt

onld

onerr

onas

onae

onai

onAnimationIteration={$END$}

ontse