Vim React Snippets

A Vim snippet library for React in ES6. You may also want to check out vim-es2015-snippets.

Requires UltiSnips.

Installation

Using vim-plug:

" 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="<C-l>"

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 <C-l>.

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

In Insert mode

rfc<C-l>

Will expand to

import React from 'react';
import PropTypes from 'prop-types';
import styles from './ListItem.css';

function ListItem({ ...props }) {
  return (
    <div className={styles.base}>

    </div>
  );
}

ListItem.defaultProps = {
};

ListItem.propTypes = {
};

export default ListItem;

Check out UltiSnips/javascript.snippets to see all snippets.

Snippets

Skeleton

Lifecycle

PropTypes

Others

Hooks