{"id":13672897,"url":"https://github.com/burkeholland/simple-react-snippets","last_synced_at":"2025-04-05T21:07:49.038Z","repository":{"id":41883373,"uuid":"103276617","full_name":"burkeholland/simple-react-snippets","owner":"burkeholland","description":"Simple React Snippets for VS Code that you will actually use","archived":false,"fork":false,"pushed_at":"2024-07-26T13:58:44.000Z","size":6153,"stargazers_count":215,"open_issues_count":16,"forks_count":85,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T19:07:43.723Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/burkeholland.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-12T13:48:55.000Z","updated_at":"2024-12-22T11:42:05.000Z","dependencies_parsed_at":"2024-04-08T15:42:48.122Z","dependency_job_id":"4725cb8c-c688-452c-b28c-b26f13a1faa7","html_url":"https://github.com/burkeholland/simple-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/burkeholland%2Fsimple-react-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burkeholland%2Fsimple-react-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burkeholland%2Fsimple-react-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/burkeholland%2Fsimple-react-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/burkeholland","download_url":"https://codeload.github.com/burkeholland/simple-react-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399877,"owners_count":20932876,"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":[],"created_at":"2024-08-02T09:01:55.773Z","updated_at":"2025-04-05T21:07:49.008Z","avatar_url":"https://github.com/burkeholland.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Simple React Snippets\n\nThe essential collection of React Snippets and commands.\n\n![snippets in action](images/snippets-in-action.gif)\n\n## Features\n\nOnly what you need and nothing more. **No Redux. No React Native.**\n\nSimply, simple React snippets.\n\nThese snippets were selected carefully from my own day-to-day React use. Not\neverything in React is included here. This is a hand selected set of snippets\nthat work the way that you would expect, not just a copy of the documentation.\n\n## Snippets\n\n| Snippet | Renders                                       |\n| ------- | --------------------------------------------- |\n| `imr`   | Import React                                  |\n| `imrc`  | Import React / Component                      |\n| `imrd`  | Import ReactDOM                               |\n| `imrs`  | Import React / useState                       |\n| `imrse` | Import React / useState useEffect             |\n| `impt`  | Import PropTypes                              |\n| `impc`  | Import React / PureComponent                  |\n| `cc`    | Class Component                               |\n| `ccc`   | Class Component With Constructor              |\n| `cpc`   | Class Pure Component                          |\n| `ffc`   | Function Component                            |\n| `sfc`   | Stateless Function Component (Arrow function) |\n| `cdm`   | componentDidMount                             |\n| `uef`   | useEffect Hook                                |\n| `ucb`   | useCallback Hook                              |\n| `cwm`   | componentWillMount                            |\n| `cwrp`  | componentWillReceiveProps                     |\n| `gds`   | getDerivedStateFromProps                      |\n| `scu`   | shouldComponentUpdate                         |\n| `cwu`   | componentWillUpdate                           |\n| `cdu`   | componentDidUpdate                            |\n| `cwun`  | componentWillUnmount                          |\n| `cdc`   | componentDidCatch                             |\n| `gsbu`  | getSnapshotBeforeUpdate                       |\n| `ss`    | setState                                      |\n| `ssf`   | Functional setState                           |\n| `usf`   | Declare a new state variable using State Hook |\n| `ren`   | render                                        |\n| `rprop` | Render Prop                                   |\n| `hoc`   | Higher Order Component                        |\n| `cp`    | Context Provider                              |\n| `cpf`   | Class Property Function                       |\n\n## Full Expansions\n\n### imr - Import React\n\n```javascript\nimport * as React from \"react\";\n```\n\n### imrc - Import React, Component\n\n```javascript\nimport * as React from \"react\";\nimport { Component } from \"react\";\n```\n\n### imrd - Import ReactDOM\n\n```javascript\nimport ReactDOM from \"react-dom\";\n```\n\n### imrs - Import React, useState\n\n```javascript\nimport * as React from \"react\";\nimport { useState } from \"react\";\n```\n\n### imrse - Import React, useState, useEffect\n\n```javascript\nimport * as React from \"react\";\nimport { useState, useEffect } from \"react\";\n```\n\n### impt - Import PropTypes\n\n```javascript\nimport PropTypes from \"prop-types\";\n```\n\n### impc - Import PureComponent\n\n```javascript\nimport * as React from \"react\";\nimport { PureComponent } from \"react\";\n```\n\n### cc - Class Component\n\n```javascript\nclass | extends React.Component {\n  render() {\n    return \u003cdiv\u003e|\u003c/div\u003e\n  }\n}\n\nexport default |;\n```\n\n### ccc - Class Component With Constructor\n\n```javascript\nclass | extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { | };\n  }\n  render() {\n    return ( | );\n  }\n}\n\nexport default |;\n```\n\n### cpc - Class Pure Component\n\n```javascript\nclass | extends PureComponent {\n  state = { | },\n  render() {\n    return ( | );\n  }\n}\n\nexport default |;\n```\n\n### ffc - Function Component\n\n```javascript\nfunction (|) {\n    return ( | );\n}\n\nexport default |;\n```\n\n### sfc - Stateless Function Component (Arrow function)\n\n```javascript\nconst | = props =\u003e {\n  return ( | );\n};\n\nexport default |;\n```\n\n### cdm - componentDidMount\n\n```javascript\ncomponentDidMount() {\n  |\n}\n```\n\n### uef - useEffect Hook\n\n```javascript\nuseEffect(() =\u003e {\n  |\n}, []);\n```\n\n### ucb - useCallback Hook\n\n```javascript\nuseCallback((val) =\u003e {\n  |\n}, []);\n```\n\n### cwm - componentWillMount\n\n```javascript\n//WARNING! To be deprecated in React v17. Use componentDidMount instead.\ncomponentWillMount() {\n  |\n}\n```\n\n### cwrp - componentWillReceiveProps\n\n```javascript\n//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.\ncomponentWillReceiveProps(nextProps) {\n  |\n}\n```\n\n### gds - getDerivedStateFromProps\n\n```javascript\nstatic getDerivedStateFromProps(nextProps, prevState) {\n  |\n}\n```\n\n### scu - shouldComponentUpdate\n\n```javascript\nshouldComponentUpdate(nextProps, nextState) {\n  |\n}\n```\n\n### cwu - componentWillUpdate\n\n```javascript\n//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.\ncomponentWillUpdate(nextProps, nextState) {\n  |\n}\n```\n\n### cdu - componentDidUpdate\n\n```javascript\ncomponentDidUpdate(prevProps, prevState) {\n  |\n}\n```\n\n### cwun - componentWillUnmount\n\n```javascript\ncomponentWillUnmount() {\n  |\n}\n```\n\n### cdc - componentDidCatch\n\n```javascript\ncomponentDidCatch(error, info) {\n  |\n}\n```\n\n### gsbu - getSnapshotBeforeUpdate\n\n```javascript\ngetSnapshotBeforeUpdate(prevProps, prevState) {\n  |\n}\n```\n\n### ss - setState\n\n```javascript\nthis.setState({ | : | });\n```\n\n### ssf - Functional setState\n\n```javascript\nthis.setState(prevState =\u003e {\n  return { | : prevState.| }\n});\n```\n\n### usf - Declare a new state variable using State Hook\n\n```javascript\nconst [|, set|] = useState();\n```\n\n_Hit Tab to apply CamelCase to function. e.g. [count, setCount]_\n\n### ren - render\n\n```javascript\nrender() {\n  return (\n    |\n  );\n}\n```\n\n### rprop - Render Prop\n\n```javascript\nclass | extends Component {\n  state = { | },\n  render() {\n    return this.props.render({\n      |: this.state.|\n    });\n  }\n}\n\nexport default |;\n```\n\n### hoc - Higher Order Component\n\n```javascript\nfunction | (|) {\n  return class extends Component {\n    constructor(props) {\n      super(props);\n    }\n\n    render() {\n      return \u003c | {...this.props} /\u003e;\n    }\n  };\n}\n```\n\n### cpf - Class Property Function\n\n```javascript\n  | = (e) =\u003e {\n    |\n  }\n```\n\n## Commands\n\n### React: class to className\n\nChanges all occurences of `class` in JSX to `className`. This transform is safe\nto run multiple times on any document. No text needs to be selected as the\ncommand is executed on the entire document.\n\n![React: class to className](https://i.imgur.com/i1ZwvOu.gif)\n\n## Thank You! ❤️\n\nWhile I wrote the initial version of this extension, many people (too many to name) have helped make it what it is today. From providing TypeScript definitions to keeping up with changing API and best practices. If you are enjoying this extension, you have the great React community to thank.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburkeholland%2Fsimple-react-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fburkeholland%2Fsimple-react-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fburkeholland%2Fsimple-react-snippets/lists"}