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 1 year 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 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-03T19:01:16.000Z (almost 6 years ago)
- Last Synced: 2025-03-31T14:14:52.505Z (about 1 year ago)
- Topics: es2015, react, snippets, vim
- Homepage:
- Size: 22.5 KB
- Stars: 278
- Watchers: 4
- 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).
## 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(() => { }, []);` |