React.js live templates for JetBrains editors.
Clone or download
Latest commit f2954f2 May 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
jetbrains [+] bump v4.0.1 May 18, 2018
src fixed rcls template to use Component, fixed missing imports May 13, 2018
.gitignore update .gitignore Jun 5, 2015
LICENSE Initial commit Jun 5, 2015
README.md [+] bump v4.0.1 May 18, 2018
build.js [*] change React pure function component template to function declara… Mar 1, 2017
package.json [+] bump v4.0.1 May 18, 2018
settings.jar [+] bump v4.0.1 May 18, 2018

README.md

jetbrains-react

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

displayName: '$END$',

dnp

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

fdn

findDOMNode($END$);

rfdn

ReactDOM.findDOMNode($END$);

rcp

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

rhy

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

rucan

ReactDOM.unmountComponentAtNode($END$);

fup

forceUpdate($END$);

gdp

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

gdp5

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

gis

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

gis5

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

ism

isMounted()

props

this.props

dprp

const { $END$ } = this.props;

dsih

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

pts

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

pt

$START$: PropTypes.$END$,

refs

this.refs.$END$

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

this.state.$END$

dst

const { $END$ } = this.state;

ct

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

cct

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

ctx

this.context.$END$

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

transitionName="$END$"

tsa

transitionAppear={$END$}

tse

transitionEnter={$END$}

tsl

transitionLeave={$END$}

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

<>
  $END$
</>

rcr

React.createRef();

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

onCopy={$END$}

onct

onCut={$END$}

onpt

onPaste={$END$}

oncpse

onCompositionEnd={$END$}

oncpss

onCompositionStart={$END$}

oncpsu

onCompositionUpdate={$END$}

onkd

onKeyDown={$END$}

onps

onKeyPress={$END$}

onku

onKeyUp={$END$}

onfs

onFocus={$END$}

onbl

onBlur={$END$}

oncg

onChange={$END$}

onip

onInput={$END$}

onsb

onSubmit={$END$}

onc

onClick={$END$}

oncm

onContextMenu={$END$}

ondc

onDoubleClick={$END$}

ondg

onDrag={$END$}

ondge

onDragEnd={$END$}

ondgetr

onDragEnter={$END$}

ondget

onDragExit={$END$}

ondgl

onDragLeave={$END$}

ondgo

onDragOver={$END$}

ondgst

onDragStart={$END$}

ondp

onDrop={$END$}

onmd

onMouseDown={$END$}

onme

onMouseEnter={$END$}

onml

onMouseLeave={$END$}

onmm

onMouseMove={$END$}

onmot

onMouseOut={$END$}

onmov

onMouseOver={$END$}

onmu

onMouseUp={$END$}

onsl

onSelect={$END$}

ontc

onTouchCancel={$END$}

onte

onTouchEnd={$END$}

ontm

onTouchMove={$END$}

onts

onTouchStart={$END$}

onsl

onScroll={$END$}

onwl

onWheel={$END$}

onabt

onAbort={$END$}

oncpl

onCanPlay={$END$}

oncpt

onCanPlayThrough={$END$}

ondc

onDurationChange={$END$}

onempt

onEmptied={$END$}

onekpt

onEncrypted={$END$}

onend

onEnded={$END$}

onldd

onLoadedData={$END$}

onldmd

onLoadedMetadata={$END$}

onls

onLoadStart={$END$}

onpaus

onPause={$END$}

opl

onPlay={$END$}

onplg

onPlaying={$END$}

onpgs

onProgress={$END$}

onrc

onRateChange={$END$}

onsked

onSeeked={$END$}

onskin

onSeeking={$END$}

onstd

onStalled={$END$}

onsupd

onSuspend={$END$}

ontu

onTimeUpdate={$END$}

onvc

onVolumeChange={$END$}

onwt

onWaiting={$END$}

onld

onLoad={$END$}

onerr

onError={$END$}

onas

onAnimationStart={$END$}

onae

onAnimationEnd={$END$}

onai

onAnimationIteration={$END$}

ontse

onTransitionEnd={$END$}