Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joalisonpereira/rowena-react-snippets
Extensions for React, React-Native & Styled Components
https://github.com/joalisonpereira/rowena-react-snippets
extension javascript react typescript vscode vscode-extension
Last synced: 23 days ago
JSON representation
Extensions for React, React-Native & Styled Components
- Host: GitHub
- URL: https://github.com/joalisonpereira/rowena-react-snippets
- Owner: joalisonpereira
- License: mit
- Created: 2022-02-26T19:24:21.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T00:31:39.000Z (about 1 year ago)
- Last Synced: 2024-04-15T04:14:06.588Z (7 months ago)
- Topics: extension, javascript, react, typescript, vscode, vscode-extension
- Homepage:
- Size: 107 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://marketplace.visualstudio.com/items?itemName=joalisonpereira.rowena-react-snippets)
Rowena React Snippets
- [About the project](#about-the-project)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Supported Languages](#supported-languages)
- [Snippets](#snippets)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
## About The Project
This project aims to provide a set of Snippets or shortcuts for creating components and configuration files in ReactJS/React Native applications.
## Getting Started
### Installation
To install an extension you can run **Command Pallete** through the command `Ctrl + Shift + P` or `Cmd + Shift + P` , type `Install Extensions` and finally press `Enter`, then search by **Rowena React Snippets** and you will find the extension.
### Supported Languages
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
### Snippets
Below is a list of all available Snippets and the triggers for each one. The **⇥** stands for the `TAB` key.
| Trigger | Content |
| --------------------------- | --------------------------------------------------------------- |
| `rfc →` | Create a functional component |
| `styled-react →` | Create a styles file for ReactJS (**Styled Components**) |
| `styled-react-native →` | Create a styles file for React Native (**Styled Components**) |
| `api →` | Create API instance (**Axios**) |
| `us →` | Create **useState** call |
| `ue →` | Create **useEffect** call |
| `uc →` | Create **useCallback** call |
| `um →` | Create **useMemo** call |
| `un →` | Create **useNavigation** call (**React Navigation**)) |
| `usl →` | Create **useSelector** call (**Redux**) |
| `ud →` | Create **useDispatch** call (**Redux**) |
| `slice →` | Create a slice file (**Redux Toolkit**) |
| `store-react →` | Create Store file for ReactJS (**Redux**) |
| `store-react-native →` | Create Store file for React Native (**Redux**) |
| `root-reducer →` | Create Root Reducer file (**Redux**) |
| `root-saga →` | Create Root Saga file (**Redux**) |
| `reactotron-react →` | Create reactotron config file for ReactJS (**Reactotron**) |
| `reactotron-react-native →` | Create reactotron config file for React Native (**Reactotron**) |
## Contributing
1. Fork the project
2. Create a Branch for your Feature (`git checkout -b feature/FeatureAmazing`)
3. Add your changes (`git add .`)
4. Commit your changes (`git commit -m 'Adding an awesome Feature!`)
5. Push the Branch (`git push origin feature/FeatureAmazing`)
6. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Credits
This extension is heavily inspired by [Rocketseat Snippets](https://github.com/Rocketseat/rocketseat-vscode-reactjs-snippets).