A Vim snippet library for React in ES6. You may also want to check out vim-es2015-snippets.
Requires UltiSnips.
Using vim-plug:
" ES2015 code snippets (Optional) Plug 'epilande/vim-es2015-snippets' " React code snippets Plug 'hbarcelos/vim-react-snippets' " Ultisnips Plug 'SirVer/ultisnips'
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-c>.
For example, let's say we have ListItem.js
In Insert mode
rfc<C-c>
Will expand to
import React from 'react'; import PropTypes from 'prop-types'; function ListItem({ ...props }) { return ( <div> </div> ); } ListItem.defaultProps = { }; ListItem.propTypes = { }; export default ListItem;
Check out UltiSnips/javascript.snippets to see all snippets.
| Trigger | Content |
|---|---|
rrcc→ |
React Redux Class Component |
rcc→ |
React Class Component |
rfc→ |
React Functional Component |
rsc→ |
React Styled Component |
rsci→ |
React Styled Component Interpolation |
| 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() {...} |
| 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 |
| Trigger | Content |
|---|---|
props→ |
this.props |
state→ |
this.state |
set→ |
this.setState(...) |
dp→ |
defaultProps {...} |
cn→ |
className |
ref→ |
ref |
pp→ |
${props => props} |
| 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(() => { }, []); |