{"id":13476934,"url":"https://github.com/epilande/vim-react-snippets","last_synced_at":"2025-04-07T17:09:42.748Z","repository":{"id":85574462,"uuid":"70298414","full_name":"epilande/vim-react-snippets","owner":"epilande","description":":scissors: React code snippets for vim","archived":false,"fork":false,"pushed_at":"2020-08-03T19:01:16.000Z","size":23,"stargazers_count":278,"open_issues_count":6,"forks_count":78,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T14:14:52.505Z","etag":null,"topics":["es2015","react","snippets","vim"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/epilande.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-08T02:44:46.000Z","updated_at":"2025-02-10T15:10:49.000Z","dependencies_parsed_at":"2023-07-08T22:31:52.954Z","dependency_job_id":null,"html_url":"https://github.com/epilande/vim-react-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epilande%2Fvim-react-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epilande%2Fvim-react-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epilande%2Fvim-react-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epilande%2Fvim-react-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epilande","download_url":"https://codeload.github.com/epilande/vim-react-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es2015","react","snippets","vim"],"created_at":"2024-07-31T16:01:36.369Z","updated_at":"2025-04-07T17:09:42.708Z","avatar_url":"https://github.com/epilande.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# Vim React Snippets\n\nA Vim snippet library for React in ES6. You may also want to check out [vim-es2015-snippets](https://github.com/epilande/vim-es2015-snippets).\n\nRequires [UltiSnips](https://github.com/SirVer/ultisnips).\n\n![vim-react-snippets](http://i.imgur.com/ImgaW2k.gif)\n\n## Installation\n\nUsing [vim-plug](https://github.com/junegunn/vim-plug):\n\n```vim\n\" ES2015 code snippets (Optional)\nPlug 'epilande/vim-es2015-snippets'\n\n\" React code snippets\nPlug 'epilande/vim-react-snippets'\n\n\" Ultisnips\nPlug 'SirVer/ultisnips'\n\n\" Trigger configuration (Optional)\n\" let g:UltiSnipsExpandTrigger=\"\u003cC-l\u003e\"\n```\n\n## Usage\nIn 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 `\u003cC-l\u003e`.\n\nFor example, let's say we have `ListItem.js`\n\nIn Insert mode\n\n```javascript\nrfc\u003cC-l\u003e\n```\n\nWill expand to\n\n```javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './ListItem.css';\n\nfunction ListItem({ ...props }) {\n  return (\n    \u003cdiv className={styles.base}\u003e\n\n    \u003c/div\u003e\n  );\n}\n\nListItem.defaultProps = {\n};\n\nListItem.propTypes = {\n};\n\nexport default ListItem;\n```\n\nCheck out [`UltiSnips/javascript.snippets`](UltiSnips/javascript.snippets) to see all snippets.\n\n\n## Snippets\n\n#### Skeleton\n\n| Trigger  | Content |\n| -------: | ------- |\n| `rrcc→`  | React Redux Class Component |\n| `rcc→`   | React Class Component |\n| `rfc→`   | React Functional Component |\n| `rsc→`   | React Styled Component |\n| `rsci→`   | React Styled Component Interpolation |\n\n\n#### Lifecycle\n\n| Trigger  | Content |\n| -------: | ------- |\n| `cwm→`   | `componentWillMount() {...}` |\n| `cdm→`   | `componentDidMount() {...}` |\n| `cwrp→`  | `componentWillReceiveProps(nextProps) {...}` |\n| `scup→`  | `shouldComponentUpdate(nextProps, nextState) {...}` |\n| `cwup→`  | `componentWillUpdate(nextProps, nextState) {...}` |\n| `cdup→`  | `componentDidUpdate(prevProps, prevState) {...}` |\n| `cwu→`   | `componentWillUnmount() {...}` |\n| `ren→`   | `render() {...}` |\n\n\n#### PropTypes\n\n| Trigger    | Content |\n| -------:   | ------- |\n| `pt→`      | `propTypes {...}` |\n| `pt.a→`    | `PropTypes.array` |\n| `pt.b→`    | `PropTypes.bool` |\n| `pt.f→`    | `PropTypes.func` |\n| `pt.n→`    | `PropTypes.number` |\n| `pt.o→`    | `PropTypes.object` |\n| `pt.s→`    | `PropTypes.string` |\n| `pt.no→`   | `PropTypes.node` |\n| `pt.e→`    | `PropTypes.element` |\n| `pt.io→`   | `PropTypes.instanceOf` |\n| `pt.one→`  | `PropTypes.oneOf` |\n| `pt.onet→` | `PropTypes.oneOfType (Union)` |\n| `pt.ao→`   | `PropTypes.arrayOf (Instances)` |\n| `pt.oo→`   | `PropTypes.objectOf` |\n| `pt.sh→`   | `PropTypes.shape` |\n| `ir→`      | `isRequired` |\n\n#### Others\n\n| Trigger  | Content |\n| -------: | ------- |\n| `props→` | `this.props` |\n| `state→` | `this.state` |\n| `set→`   | `this.setState(...)` |\n| `dp→`    | `defaultProps {...}` |\n| `cn→`    | `className` |\n| `ref→`   | `ref` |\n| `pp→`    | `${props =\u003e props}` |\n\n#### Hooks\n\n| Trigger  | Content |\n| -------: | ------- |\n| `us.s→`  | `const [state, setState] = useState('');` |\n| `us.e→`  | `useEffect(() =\u003e { });`                   |\n| `us.er→` | `useEffect(() =\u003e { return () =\u003e {}; });`  |\n| `us.c→`  | `const context = useContext(ctx);`        |\n| `us.r→`  | `const [store, dispatch] = useReducer(storeReducer, initialState);` |\n| `us.cb→` | `useCallback(() =\u003e {  }, []);` |\n| `us.m→`  | `const memo = useMemo(() =\u003e {  }, []);` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepilande%2Fvim-react-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepilande%2Fvim-react-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepilande%2Fvim-react-snippets/lists"}