Sublime ES7 React Redux ReactNative JS snippets

by lassegit ALL

Sublime ES7 React/Redux/React-Native/JS snippets

Details

Version 1.0.4
Homepage github.com
Issues github.com
Modified 4 years ago
Last Seen 22 minutes ago
First Seen 5 years ago

Installs

Total 29K
Win 20K
Mac 4K
Linux 5K

	Nov 21	Nov 20	Nov 19	Nov 18	Nov 17	Nov 16	Nov 15	Nov 14	Nov 13	Nov 12	Nov 11	Nov 10	Nov 9	Nov 8	Nov 7	Nov 6	Nov 5	Nov 4	Nov 3	Nov 2	Nov 1	Oct 31	Oct 30	Oct 29	Oct 28	Oct 27	Oct 26	Oct 25	Oct 24	Oct 23	Oct 22	Oct 21	Oct 20	Oct 19	Oct 18	Oct 17	Oct 16	Oct 15	Oct 14	Oct 13	Oct 12	Oct 11	Oct 10	Oct 9	Oct 8	Oct 7
Windows	2	3	1	2	5	0	2	0	0	2	5	5	7	5	3	2	2	3	3	4	2	3	5	5	1	0	1	2	1	3	1	3	0	1	4	5	5	3	4	2	2	7	6	5	2	5
Mac	1	1	0	0	0	0	2	0	0	0	1	0	0	1	0	0	0	2	0	1	2	1	2	0	0	0	1	0	1	0	1	1	2	0	0	0	1	0	1	0	0	0	1	0	1	0
Linux	0	1	1	0	0	0	1	0	0	2	1	0	3	0	0	1	4	2	1	0	0	0	1	1	0	1	0	0	0	2	1	0	1	1	2	1	0	0	0	1	1	2	0	0	2	2

Readme

Source: raw.githubusercontent.com

Sublime ES7 React/Redux/React-Native/JS snippets (for JS and TS)

This Sublime extension ports the excellent and popular snippets collection from the “VS Code ES7 React/Redux/React-Native/JS snippets” to Sublime. The snippets from the VS Code extension are located in scr/snippets.json, the script that converts the snippets to Sublime snippet format is in src/index.js and the finished Sublime snippets are in snippets/ folder. Snippets work for both typescript and javascript.

Also note, all { PureComponent } or { Component } have been replaced with ...extends React.PureComponent or ...extends React.Component.

The are in total 148

Installation

Install via Package Control.

Open the Command Palette via Ctrl/⌘+Shift+p
Select Package Control: Install Package
Search for Sublime ES7 React/Redux/React-Native/JS snippets and press ↲ Enter

Snippet information copy/pasted from: “VS Code ES7 React/Redux/React-Native/JS snippets”

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

Basic Methods

Prefix	Method
`imp→`	`import moduleName from 'module'`
`imn→`	`import 'module'`
`imd→`	`import { destructuredModule } from 'module'`
`ime→`	`import * as alias from 'module'`
`ima→`	`import { originalName as aliasName} from 'module'`
`exp→`	`export default moduleName`
`exd→`	`export { destructuredModule } from 'module'`
`exa→`	`export { originalName as aliasName} from 'module'`
`enf→`	`export const functionName = (params) => { }`
`edf→`	`export default (params) => { }`
`met→`	`methodName = (params) => { }`
`fre→`	`arrayName.forEach(element => { }`
`fof→`	`for(let itemName of objectName { }`
`fin→`	`for(let itemName in objectName { }`
`anfn→`	`(params) => { }`
`nfn→`	`const functionName = (params) => { }`
`dob→`	`const {propName} = objectToDescruct`
`dar→`	`const [propName] = arrayToDescruct`
`sti→`	`setInterval(() => { }, intervalTime`
`sto→`	`setTimeout(() => { }, delayTime`
`prom→`	`return new Promise((resolve, reject) => { }`
`cmmb→`	`comment block`
`cp→`	`const { } = this.props`
`cs→`	`const { } = this.state`

React

Prefix	Method
`imr→`	`import React from 'react'`
`imrd→`	`import ReactDOM from 'react-dom'`
`imrc→`	`import React, { Component } from 'react'`
`imrcp→`	`import React, { Component } from 'react' & import PropTypes from 'prop-types'`
`imrpc→`	`import React, { PureComponent } from 'react'`
`imrpcp→`	`import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'`
`imrm→`	`import React, { memo } from 'react'`
`imrmp→`	`import React, { memo } from 'react' & import PropTypes from 'prop-types'`
`impt→`	`import PropTypes from 'prop-types'`
`imrr→`	`import { BrowserRouter as Router, Route, Link } from 'react-router-dom'`
`redux→`	`import { connect } from 'react-redux'`
`rconst→`	`constructor(props) with this.state`
`rconc→`	`constructor(props, context) with this.state`
`est→`	`this.state = { }`
`cwm→`	`componentWillMount = () => { }` DEPRECATED!!!
`cdm→`	`componentDidMount = () => { }`
`cwr→`	`componentWillReceiveProps = (nextProps) => { }` DEPRECATED!!!
`scu→`	`shouldComponentUpdate = (nextProps, nextState) => { }`
`cwup→`	`componentWillUpdate = (nextProps, nextState) => { }` DEPRECATED!!!
`cdup→`	`componentDidUpdate = (prevProps, prevState) => { }`
`cwun→`	`componentWillUnmount = () => { }`
`gdsfp→`	`static getDerivedStateFromProps(nextProps, prevState) { }`
`gsbu→`	`getSnapshotBeforeUpdate = (prevProps, prevState) => { }`
`ren→`	`render() { return( ) }`
`sst→`	`this.setState({ })`
`ssf→`	`this.setState((state, props) => return { })`
`props→`	`this.props.propName`
`state→`	`this.state.stateName`
`rcontext→`	`const ${1:contextName} = React.createContext()`
`cref→`	`this.${1:refName}Ref = React.createRef()`
`fref→`	`const ref = React.createRef()`
`bnd→`	`this.methodName = this.methodName.bind(this)`

React Hooks

All hooks from official docs are added with hook name prefix.

React Native

Prefix	Method
`imrn→`	`import { $1 } from 'react-native'`
`rnstyle→`	`const styles = StyleSheet.create({})`

Redux

Prefix	Method
`rxaction→`	`redux action template`
`rxconst→`	`export const $1 = '$1'`
`rxreducer→`	`redux reducer template`
`rxselect→`	`redux selector template`

PropTypes

Prefix	Method
`pta→`	`PropTypes.array`
`ptar→`	`PropTypes.array.isRequired`
`ptb→`	`PropTypes.bool`
`ptbr→`	`PropTypes.bool.isRequired`
`ptf→`	`PropTypes.func`
`ptfr→`	`PropTypes.func.isRequired`
`ptn→`	`PropTypes.number`
`ptnr→`	`PropTypes.number.isRequired`
`pto→`	`PropTypes.object`
`ptor→`	`PropTypes.object.isRequired`
`pts→`	`PropTypes.string`
`ptsr→`	`PropTypes.string.isRequired`
`ptnd→`	`PropTypes.node`
`ptndr→`	`PropTypes.node.isRequired`
`ptel→`	`PropTypes.element`
`ptelr→`	`PropTypes.element.isRequired`
`pti→`	`PropTypes.instanceOf(name)`
`ptir→`	`PropTypes.instanceOf(name).isRequired`
`pte→`	`PropTypes.oneOf([name])`
`pter→`	`PropTypes.oneOf([name]).isRequired`
`ptet→`	`PropTypes.oneOfType([name])`
`ptetr→`	`PropTypes.oneOfType([name]).isRequired`
`ptao→`	`PropTypes.arrayOf(name)`
`ptaor→`	`PropTypes.arrayOf(name).isRequired`
`ptoo→`	`PropTypes.objectOf(name)`
`ptoor→`	`PropTypes.objectOf(name).isRequired`
`ptsh→`	`PropTypes.shape({ })`
`ptshr→`	`PropTypes.shape({ }).isRequired`
`ptany→`	`PropTypes.any`
`ptypes→`	`static propTypes = {}`

GraphQL

|graphql→|import { compose, graphql } from 'react-apollo'|

`expgql`

export default compose(graphql($1, { name: $2 }))($3);

Console

Prefix	Method
`clg→`	`console.log(object)`
`clo→`	`console.log("object", object)`
`ctm→`	`console.time("timeId")`
`cte→`	`console.timeEnd("timeId")`
`cas→`	`console.assert(expression,object)`
`ccl→`	`console.clear()`
`cco→`	`console.count(label)`
`cdi→`	`console.dir`
`cer→`	`console.error(object)`
`cgr→`	`console.group(label)`
`cge→`	`console.groupEnd()`
`ctr→`	`console.trace(object)`
`cwa→`	`console.warn`
`cin→`	`console.info`

React Components

`rcc`

import React, { Component } from 'react';

export default class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}

`rce`

import React, { Component } from 'react';

export class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}

export default $1;

`rcep`

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

export class FileName extends Component {
  static propTypes = {};

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

export default $1;

`rpc`

import React, { PureComponent } from 'react';

export default class FileName extends PureComponent {
  render() {
    return <div>$2</div>;
  }
}

`rpcp`

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

export default class FileName extends PureComponent {
  static propTypes = {};

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

`rpce`

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

export class FileName extends PureComponent {
  static propTypes = {};

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

export default FileName;

`rccp`

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

export default class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

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

`rfcp`

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

function $1(props) {
  return <div>$0</div>;
}

$1.propTypes = {};

export default $1;

`rfc`

import React from 'react';

export default function $1() {
  return <div>$0</div>;
}

`rfce`

import React from 'react';

function $1() {
  return <div>$0</div>;
}

export default $1;

`rafcp`

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

const $1 = props => {
  return <div>$0</div>;
};

$1.propTypes = {};

export default $1;

`rafc`

import React from 'react';

const $1 = () => {
  return <div>$0</div>;
};

export default $1;

`rafce`

import React from 'react';

const $1 = () => {
  return <div>$0</div>;
};

export default $1;

`rmc`

import React, { memo } from 'react';

export default memo(function $1() {
  return <div>$0</div>;
});

`rmcp`

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

const $1 = memo(function $1(props) {
  return <div>$0</div>;
});

$1.propTypes = {};

export default $1;

`rcredux`

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

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

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

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(FileName);

`reduxmap`

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

React Native Components

`rnc`

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

`rnf`

import React from 'react';
import { View, Text } from 'react-native';

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
};

export default $1;

`rncs`

import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

`rnce`

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

export default $1;

`rncredux`

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

const mapStateToProps = state => ({});

const mapDispatchToProps = {};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(FileName);

Others

`cmmb`

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

`desc`

describe('$1', () => {
  $2;
});

`test`

test('should $1', () => {
  $2;
});

`tit`

it('should $1', () => {
  $2;
});

`stest`

import React from 'react'
import renderer from 'react-test-renderer'

import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

`srtest`

import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store'
import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:${TM_FILENAME_BASE}} {...defaultProps} />)
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

`sntest`

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {

  }

  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

`snrtest`

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'
import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:ComponentName} {...defaultProps} />
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

`hocredux`

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = state => ({

})

export const mapDispatchToProps = {

}

export const ${1:hocComponentName} = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  }

  return hocComponent
}

export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

`hoc`

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

export default WrappedComponent => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;

  hocComponent.propTypes = {};

  return hocComponent;
};

Sublime ES7 React Redux React​Native JS snippets

Details

Installs

Readme

Sublime ES7 React/Redux/React-Native/JS snippets (for JS and TS)

Installation

Snippet information copy/pasted from: “VS Code ES7 React/Redux/React-Native/JS snippets”

Basic Methods

React

React Hooks

React Native

Redux

PropTypes

GraphQL

expgql

Console

React Components

rcc

rce

rcep

rpc

rpcp

rpce

rccp

rfcp

rfc

rfce

rafcp

rafc

rafce

rmc

rmcp

rcredux

reduxmap