Giter VIP home page Giter VIP logo

vim-react-ultisnips's Introduction

vim-react-es6-snippets

A set of snippets for Vim to work with Facebook's React library.

A direct port of the awesome snippets from justinj/vim-react-snippets.

Requires vim-snipmate.

Installation

Use your preferred Vim plugin installation method. Vundle or Pathogen should be fine (I use Pathogen).

Usage

snippet rsc "React Hooks Function" b
import React from 'react'
import { string, $5 } from 'prop-types'
import { Container, $4 } from './$1.styles'

export default function ${1:`!v expand('%:t:r')`}({$3}) {
	return (
		<Container>
			$4
		</Container>
	)
}

$1.propTypes = {
}
endsnippet

snippet rnsiov "React Native Create Story(iOv project)" b
import React from 'react'
import ${1:`!v expand('%:t:r')`} from './$1'
import { storiesOf } from '@storybook/react-native'
import { withKnobs } from '@storybook/addon-knobs'

import { RNETheme, stackNavigationDecorator } from '~/storybook/decorators'
import { mockProps } from './$1.mock'

storiesOf('$1', module)
	.addDecorator(stackNavigationDecorator)
	.addDecorator(RNETheme)
	.addDecorator(withKnobs)
	.add('default', () => <$1 {...mockProps} />)
endsnippet

snippet rnspciov "React Native Spec file (iOv project)" b
import React from 'react'
import ${1:`!v expand('%:t:r')`} from './$1'
import { mockProps } from './$1.mock'

import { render } from '~/jest'

it('renders correctly', () => {
	const wrapper = render(<$1 {...mockProps} />)
	expect(wrapper.toJSON()).toMatchSnapshot()
})
endsnippet

snippet rnsciov "React Native styled component(iOv project)" b
import styled from 'styled-components/native'
import theme from '~/app/styles'

export const Container = styled.View\`\`
endsnippet

snippet rnmockiov "React Native mock (iOv project)" b
import React from 'react'
import { Back${1:, Close} } from '~/app/components/base'

export const mockProps = {
	headerTitle: '$2',
	headerLeft: <Back />,
	${1:headerRight: <Close />,}
	placeName: 'Dunedin Bush Camp and Lodge Long Name',
}
endsnippet

snippet ue "React useEffect" b
useEffect(() => {
}, $1)
endsnippet

snippet immh "Import hooks" b
import React, { useState${2:, useEffect} } from 'react'
endsnippet

snippet us "React useEffect" b
const [$1, set$2] = useState($3)
endsnippet

snippet rrcc "React Redux Class Component" b
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as $2ActionCreators from '../../redux/modules/$2'

class ${1:`!v expand('%:t:r')`} extends Component {
	static propTypes = {
		children: PropTypes.node,
		dispatch: PropTypes.func.isRequired,
	}

	render() {
		return (
			${3:null}
		)
	}
}

function mapStateToProps (state) {
	return {}
}

function mapDispatchToProps (dispatch) {
	return bindActionCreators($2ActionCreators, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)($1)
endsnippet

snippet rrncc "create redux native class/component" b
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View } from 'react-native'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import * as $2ActionCreators from '../../redux/modules/$2'

class ${1:`!v expand('%:t:r')`} extends Component {
	static propTypes = {
		children: PropTypes.node,
	}

	render () {
		return (
			<View>$0</View>
		)
	}
}

function mapStateToProps ({$2}) {
	return {$2}
}

function mapDispatchToProps (dispatch) {
	return bindActionCreators($2ActionCreators, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)($1)
endsnippet


snippet rncsc "create native stateless component" b
import React from 'react'
import { View, Text, ${3:StyleSheet} } from 'react-native'

export default function ${1:`!v expand('%:t:r')`}(props) {
	return (
		<View>
			<Text>$2</Text>
		</View>
	)
}

${3:const styles = StyleSheet.create({
})}
endsnippet

snippet im "import" b
import $1 from '$2'
endsnippet

snippet imm "import with brackets" b
import { $1 } from '$2'
endsnippet

snippet ex "export component" b
export { default as $1$2 } from './$1/$1$2'
endsnippet

snippet fu "create function" i
function $1($2) {
	$3
}
endsnippet

snippet ef "export function" b
export function $1($2) {
	$3
}
endsnippet

snippet edf "export default function" b
export default function $1($2) {
	${3}
}
endsnippet

snippet () "annon function" i
() => ${1:{}}
endsnippet

snippet if "if statement"
if ($1){
	$2
}
endsnippet

snippet dp "default props" b
$1.defaultProps = {
	$2: $3,
}
endsnippet

snippet pt "propTypes" b
$1.propTypes = {
	$2: ${3:string}.isRequired,
}
endsnippet

snippet ptp "propType partial" b
	$1: ${2:string}${3:.isRequired},
endsnippet

snippet cs "create StyleSheet" b
const styles = StyleSheet.create({
	$1: {
		$2: $3,
	},
})
endsnippet

snippet cl "log console" i
console.log($1)
endsnippet

snippet ce "log error console" i
console.error($1)
endsnippet

snippet co "const" i
const $1 = $2
endsnippet

snippet le "let" i
let $1 = $2
endsnippet

snippet db "debugger" b
debugger
endsnippet

snippet rr "redux reducer" i
const initialState = {}

export default function ${1:`!v expand('%:t:r')`} (state = initialState, action) {
	switch (action.type) {

		default :
			return state
	}
}
endsnippet

snippet rcs "redux case switch" b
case $1 :
	return { ...state, ...{$2: action.$2} }
endsnippet

snippet rce "redux case switch" b
case $1_ERROR :
	return {
		...state,
		action.errors
	}
endsnippet

snippet racc "redux action creator with constant" b
export const $3 = '$3'
export function $1 ($2) {
	return {
		type: $3,$0
	}
}
endsnippet

snippet rac "redux action creator" b
export function ${1} (${2}) {
	return {
		type: ${3},$0
	}
}
endsnippet

snippet try "try/catch block" b
try {

} catch (error) {
	console.error(error)
}
endsnippet

vim-react-ultisnips's People

Contributors

bentayloruk avatar betoharres avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.