https://github.com/epilande/vim-react-snippets

:scissors: React code snippets for vim
https://github.com/epilande/vim-react-snippets

es2015 react snippets vim

Last synced: about 9 hours ago
JSON representation

:scissors: React code snippets for vim

• Host: GitHub
• URL: https://github.com/epilande/vim-react-snippets
• Owner: epilande
• Created: 2016-10-08T02:44:46.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-08-03T19:01:16.000Z (over 4 years ago)
• Last Synced: 2025-01-16T02:15:17.161Z (8 days ago)
• Topics: es2015, react, snippets, vim
• Homepage:
• Size: 22.5 KB
• Stars: 279
• Watchers: 5
• Forks: 78
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vim React Snippets

A Vim snippet library for React in ES6. You may also want to check out [vim-es2015-snippets](https://github.com/epilande/vim-es2015-snippets).

Requires [UltiSnips](https://github.com/SirVer/ultisnips).

![vim-react-snippets](http://i.imgur.com/ImgaW2k.gif)

## Installation

Using [vim-plug](https://github.com/junegunn/vim-plug):

```vim

" ES2015 code snippets (Optional)

Plug 'epilande/vim-es2015-snippets'

" React code snippets

Plug 'epilande/vim-react-snippets'

" Ultisnips

Plug 'SirVer/ultisnips'

" Trigger configuration (Optional)

" let g:UltiSnipsExpandTrigger=""

```

## Usage

In a JavaScript or JSX file, type a trigger name while in Insert mode, then press Ultisnips trigger key. In my case I have it mapped to ``.

For example, let's say we have `ListItem.js`

In Insert mode

```javascript

rfc

```

Will expand to

```javascript

import React from 'react';

import PropTypes from 'prop-types';

import styles from './ListItem.css';

function ListItem({ ...props }) {

  return (

    


    

  );

}


ListItem.defaultProps = {

};

ListItem.propTypes = {

};

export default ListItem;

```

Check out [`UltiSnips/javascript.snippets`](UltiSnips/javascript.snippets) to see all snippets.

## Snippets

#### Skeleton

| Trigger  | Content |

| -------: | ------- |

| `rrcc→`  | React Redux Class Component |

| `rcc→`   | React Class Component |

| `rfc→`   | React Functional Component |

| `rsc→`   | React Styled Component |

| `rsci→`   | React Styled Component Interpolation |

#### Lifecycle

| Trigger  | Content |

| -------: | ------- |

| `cwm→`   | `componentWillMount() {...}` |

| `cdm→`   | `componentDidMount() {...}` |

| `cwrp→`  | `componentWillReceiveProps(nextProps) {...}` |

| `scup→`  | `shouldComponentUpdate(nextProps, nextState) {...}` |

| `cwup→`  | `componentWillUpdate(nextProps, nextState) {...}` |

| `cdup→`  | `componentDidUpdate(prevProps, prevState) {...}` |

| `cwu→`   | `componentWillUnmount() {...}` |

| `ren→`   | `render() {...}` |

#### PropTypes

| Trigger    | Content |

| -------:   | ------- |

| `pt→`      | `propTypes {...}` |

| `pt.a→`    | `PropTypes.array` |

| `pt.b→`    | `PropTypes.bool` |

| `pt.f→`    | `PropTypes.func` |

| `pt.n→`    | `PropTypes.number` |

| `pt.o→`    | `PropTypes.object` |

| `pt.s→`    | `PropTypes.string` |

| `pt.no→`   | `PropTypes.node` |

| `pt.e→`    | `PropTypes.element` |

| `pt.io→`   | `PropTypes.instanceOf` |

| `pt.one→`  | `PropTypes.oneOf` |

| `pt.onet→` | `PropTypes.oneOfType (Union)` |

| `pt.ao→`   | `PropTypes.arrayOf (Instances)` |

| `pt.oo→`   | `PropTypes.objectOf` |

| `pt.sh→`   | `PropTypes.shape` |

| `ir→`      | `isRequired` |

#### Others

| Trigger  | Content |

| -------: | ------- |

| `props→` | `this.props` |

| `state→` | `this.state` |

| `set→`   | `this.setState(...)` |

| `dp→`    | `defaultProps {...}` |

| `cn→`    | `className` |

| `ref→`   | `ref` |

| `pp→`    | `${props => props}` |

#### Hooks

| Trigger  | Content |

| -------: | ------- |

| `us.s→`  | `const [state, setState] = useState('');` |

| `us.e→`  | `useEffect(() => { });`                   |

| `us.er→` | `useEffect(() => { return () => {}; });`  |

| `us.c→`  | `const context = useContext(ctx);`        |

| `us.r→`  | `const [store, dispatch] = useReducer(storeReducer, initialState);` |

| `us.cb→` | `useCallback(() => {  }, []);` |

| `us.m→`  | `const memo = useMemo(() => {  }, []);` |