diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..dd64616
Binary files /dev/null and b/.DS_Store differ
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..9c95eef
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,21 @@
+## React Snipp - Changelog
+
+This changelog details updates for the React Native Essentials VS Code extension.
+
+**v0.0.1 - Initial Release (2024-07-21)**
+
+* **Features:**
+ * Introduced a collection of code snippets to streamline React Native development.
+ * Provided snippets for creating various React Native components (class-based, functional, with Redux integration).
+ * Included snippets for common functionalities like imports, styling, hooks (custom, useCallback, useMemo), data display (FlatList), navigation (React Navigation screen), and Async Storage.
+
+**Future Development**
+
+* We're actively working on expanding the snippet library to cover more React Native functionalities and patterns.
+* Stay tuned for updates that will include snippets for animations, gestures, testing, and more!
+
+**Contribution**
+
+We welcome contributions from the community! Feel free to raise issues or suggest new snippets on the project's GitHub repository: [https://www.github.com/adityavijay21/reactsnipp](https://www.github.com/adityavijay21/reactsnipp)
+
+**We appreciate your support and look forward to seeing how React Native Essentials empowers your development!**
diff --git a/FEATURES.md b/FEATURES.md
new file mode 100644
index 0000000..fec5601
--- /dev/null
+++ b/FEATURES.md
@@ -0,0 +1 @@
+# Hello
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..d3c5571
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ReactSnipp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..d3c5571
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ReactSnipp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index de74065..1f0ac72 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,78 @@
+[![Install Now](/images/readmeheader.png)](https://marketplace.visualstudio.com/items?itemName=adityavijay21.ReactSnipp)
-
About Kiriotheo!
-
+a comprehensive collection of React snippets designed to streamline your workflow and boost your productivity. These snippets cover everything from basic imports to complex React patterns, allowing you to write clean, efficient React code faster than ever before.
-- **Currently Working On:** Mental Health
-- **Hobbies:** Procrastinating, Hiding Dead Bodies
-- **Loves:** Open Source, RHELL9 and to add trash on Github
+![GIF](/images/readmeuse.gif)
+
+### Key Features:
+
+- π¦ 25+ carefully crafted snippets
+- π― Covers modern React practices and hooks
+- 𧩠Easy to use and remember prefixes
+- π Customizable to fit your coding style
+- π Includes common React patterns and best practices
+
+## π Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Snippet List](#snippet-list)
+- [Contributing](#contributing)
+- [License](#license)
+
+## π» Installation
+
+1. Open your code editor (e.g., VS Code, Sublime Text, WebStorm)
+2. Navigate to the snippets or user preferences section
+3. Copy the contents of the `react-snippets.json` file
+4. Paste into your user snippets file for JavaScript React
+
+For Visual Studio Code users:
+
+1. Press `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (Mac)
+2. Type "Configure User Snippets" and select it
+3. Choose "javascriptreact.json"
+4. Paste the snippets into this file
+
+## π Usage
+
+To use a snippet, simply type its prefix and press `Tab` or `Enter`. For example:
+
+- Type `imr` and press `Tab` to import React
+- Type `ffc` and press `Tab` to create a functional component
+
+## π Snippet List
+
+Here's a quick overview of some key snippets:
+
+| Prefix | Description |
+|--------|-------------|
+| `imr` | Import React |
+| `imrs` | Import React and useState |
+| `imrse`| Import React, useState and useEffect |
+| `ffc` | Function Component |
+| `afc` | Arrow Function Component |
+| `uef` | useEffect Hook |
+| `usf` | Declare a new state variable using State Hook |
+| `ccc` | Class Component with Constructor |
+| `hoc` | Higher Order Component |
+
+...and many more! Check the full snippet file for all available shortcuts.
+
+## π₯ Contributing
+
+We welcome contributions! If you have a suggestion for a new snippet or an improvement to an existing one:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingSnippet`)
+3. Commit your changes (`git commit -m 'Add some AmazingSnippet'`)
+4. Push to the branch (`git push origin feature/AmazingSnippet`)
+5. Open a Pull Request
+
+## π License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+
+---
+
+Happy coding! π»β¨ Don't forget to star this repo if you find it useful!
\ No newline at end of file
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index fc24e7a..0000000
--- a/_config.yml
+++ /dev/null
@@ -1 +0,0 @@
-theme: jekyll-theme-hacker
\ No newline at end of file
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..fa47ee1
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/readmeheader.png b/images/readmeheader.png
new file mode 100644
index 0000000..7ceab1f
Binary files /dev/null and b/images/readmeheader.png differ
diff --git a/images/readmeuse.gif b/images/readmeuse.gif
new file mode 100644
index 0000000..28eb783
Binary files /dev/null and b/images/readmeuse.gif differ
diff --git a/node_modules/.DS_Store b/node_modules/.DS_Store
new file mode 100644
index 0000000..203319e
Binary files /dev/null and b/node_modules/.DS_Store differ
diff --git a/node_modules/.bin/json-concat b/node_modules/.bin/json-concat
new file mode 120000
index 0000000..a91aa39
--- /dev/null
+++ b/node_modules/.bin/json-concat
@@ -0,0 +1 @@
+../json-concat/bin/json-concat
\ No newline at end of file
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 0000000..32a9cbf
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,18 @@
+{
+ "name": "react-native-essentials",
+ "version": "0.0.1",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "node_modules/json-concat": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/json-concat/-/json-concat-0.0.1.tgz",
+ "integrity": "sha512-clK755bwGKlpRESYivScHgyaMV+aChahmbywnpACF8CEECgtXFAh9dWuym7h0FwlyawjldN80uEXf9BcxeKVPA==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "json-concat": "bin/json-concat"
+ }
+ }
+ }
+}
diff --git a/node_modules/json-concat/.DS_Store b/node_modules/json-concat/.DS_Store
new file mode 100644
index 0000000..7ec3383
Binary files /dev/null and b/node_modules/json-concat/.DS_Store differ
diff --git a/node_modules/json-concat/.npmignore b/node_modules/json-concat/.npmignore
new file mode 100644
index 0000000..f43b504
--- /dev/null
+++ b/node_modules/json-concat/.npmignore
@@ -0,0 +1,11 @@
+# our tests
+test/
+.test/
+
+# coffeescript files
+src/
+
+# misc
+Gruntfile.coffee
+.travis.yml
+.gitignore
diff --git a/node_modules/json-concat/CHANGELOG.md b/node_modules/json-concat/CHANGELOG.md
new file mode 100644
index 0000000..3e8f28f
--- /dev/null
+++ b/node_modules/json-concat/CHANGELOG.md
@@ -0,0 +1,21 @@
+
+# Change Log
+
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+
+## Unreleased
+
+
+## 0.0.1
+
+Fixed:
+
+* fix running executable (issue #2)
+
+
+## 0.0.0
+
+This is the very first version.
+
diff --git a/node_modules/json-concat/LICENSE b/node_modules/json-concat/LICENSE
new file mode 100644
index 0000000..f27c03c
--- /dev/null
+++ b/node_modules/json-concat/LICENSE
@@ -0,0 +1,25 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2016 GochoMugo
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software
+without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to
+whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall
+be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
+KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
+OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/node_modules/json-concat/README.md b/node_modules/json-concat/README.md
new file mode 100644
index 0000000..a45263c
--- /dev/null
+++ b/node_modules/json-concat/README.md
@@ -0,0 +1,143 @@
+
+# json-concat
+
+A [Node.js][nodejs] module for concatenating JSON files and objects. Use it in
+Node.js as a __plain, old module__, in [Connect][connect] and [Express][express]
+as a __middleware__ and in your terminal as an __executable__.
+
+
+## Installation
+
+```bash
+$ npm install json-concat --save
+```
+
+To install json-concat onto your command line, you may require passing the
+`-g` flag. You may also require some `sudo` powers to make it work.
+
+```bash
+$ sudo npm install -g json-concat
+```
+
+
+## Usage
+
+### As a plain module in your apps
+
+```js
+
+var jsonConcat = require("json-concat");
+
+jsonConcat({
+ src: ["appVars.json", "userVars.json"],
+ dest: "./config.json"
+}, function (json) {
+ console.log(json);
+});
+
+```
+
+### As a middleware in Connect/Express apps
+
+```js
+
+var express = require("express"),
+ app = express(),
+ jsonConcat = require("json-concat");
+
+app.use(jsonConcat({
+ src: ["appVars.json", "userVars.json"],
+ dest: __dirname + "/config.json",
+ middleware: true
+}));
+
+```
+
+### As an executable in the command line
+
+```bash
+# As simple as this. Output file should be last
+$ json-concat file1.json file2.json ouput.json
+
+# for usage tip, invoke with no args
+$ json-concat
+```
+
+
+## Notes
+
+* The options object passed may have the following keys:
+ * **src**:
+ * (String) path pointing to a directory
+ * (Array) array of paths pointing to files and/or directories
+ * defaults to `.` (current working directory)
+ * **Note:** if this is a path points to a single file, nothing will be done.
+ * **dest**:
+ * (String) path pointing to a file in which the JSON output will be written to
+ * (Null) assign `null` to have **no** file written to
+ * defaults to `./concat.json`
+ * **middleware**:
+ * (Boolean) whether it is being used as a middleware or not
+ * defaults to `false`
+* The **callback** receives two arguments:
+ * **err**:
+ * An error object if an error does occur
+ * **json**:
+ * On Sucess, the concatenated json is passed
+ * On error, the json will be an empty string `""`
+* In Connect/Express apps, the concatenation is done on **server requests**
+* It is **asynchronous**, the Node.js way
+* It is **forgiving**, keeps going even when an error occurs. For example, a non-existent file or syntax errors in json files
+* It is **recursive**, following the folders specified. Files with the extension `.json` are considered. Symbolic links are ignored
+
+
+## Use Cases
+
+In most cases, while building an Express app, you will end up using
+[jade][jade] as your view engine. Jade allows you to pass a javascript
+object, which may be JSON, for external variables. Instead of writing all
+your variables in one file, you may distribute the variables across
+directories and concatenate them later into one file. Eventually passing
+it to the jade engine.
+
+
+## Tests and Performance
+
+[![Build Status](https://travis-ci.org/GochoMugo/json-concat.svg?branch=master)][ci] [![Coverage Status](https://coveralls.io/repos/GochoMugo/json-concat/badge.svg)](https://coveralls.io/r/GochoMugo/json-concat)
+
+To see the tests run on each commit, go to the [project's Travis page][ci].
+If interested in the algorithms used, please read the notes at the beginning
+of [src/json-concat.coffee][main_file].
+
+
+## TODO
+
+- [x] Include tests (v0.0.0)
+- [ ] Allow Synchronous Execution: be called as a function with splats
+
+```js
+
+// Just an example
+var json = jsonConcat("appVars.json", "userVars.json", {"name": "@mugo_gocho"});
+console.log(json);
+
+```
+
+- [ ] Get the JSON output in a pretty format i.e. with indentations
+
+
+## License
+
+**The MIT License (MIT)**
+
+**Copyright © 2014-2016 GochoMugo **
+
+
+[ci]:https://travis-ci.org/GochoMugo/json-concat
+[coffee]:https://coffeescript.org
+[connect]:https://senchalabs.github.com/connect
+[express]:https://expressjs.com
+[jade]:https://jade-lang.com
+[main_file]:https://github.com/GochoMugo/json-concat/blob/master/src/json-concat.coffee
+[mit]:https://opensource.org/licenses/MIT
+[nodejs]:https://nodejs.org
diff --git a/node_modules/json-concat/bin/json-concat b/node_modules/json-concat/bin/json-concat
new file mode 100755
index 0000000..84bd03a
--- /dev/null
+++ b/node_modules/json-concat/bin/json-concat
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require("../lib/cli")();
diff --git a/node_modules/json-concat/concat.json b/node_modules/json-concat/concat.json
new file mode 100644
index 0000000..e3f245d
--- /dev/null
+++ b/node_modules/json-concat/concat.json
@@ -0,0 +1,3 @@
+{
+ "planet": "mars"
+}
diff --git a/node_modules/json-concat/lib/cli.js b/node_modules/json-concat/lib/cli.js
new file mode 100644
index 0000000..00f190d
--- /dev/null
+++ b/node_modules/json-concat/lib/cli.js
@@ -0,0 +1,29 @@
+(function() {
+ "use strict";
+ var exports, jsonConcat;
+
+ jsonConcat = require("./json-concat");
+
+ exports = module.exports = function() {
+ var options;
+ if (process.argv.length === 2) {
+ return process.stdout.write("\nUsage: json-concat file1.json file2.json dir1 dir2 ... output.json\n\n");
+ } else if (process.argv.length === 3) {
+ process.stderr.write("\nNo need to concatenate\n\n");
+ return process.exit(1);
+ } else {
+ options = {};
+ options.src = process.argv.slice();
+ options.src.shift();
+ options.src.shift();
+ options.dest = options.src.pop();
+ return jsonConcat(options, function(err, json) {
+ if (err) {
+ process.stderr.write("Error occurred: %s", err);
+ return process.exit(1);
+ }
+ });
+ }
+ };
+
+}).call(this);
diff --git a/node_modules/json-concat/lib/cmd.js b/node_modules/json-concat/lib/cmd.js
new file mode 100644
index 0000000..757ff96
--- /dev/null
+++ b/node_modules/json-concat/lib/cmd.js
@@ -0,0 +1,21 @@
+(function() {
+ var jsonConcat, options;
+
+ jsonConcat = require("./json-concat");
+
+ if (process.argv.length === 2) {
+ process.stdout.write("\nUsage: json-concat file1.json file2.json dir1 dir2 ... output.json\n\n");
+ } else if (process.argv.length === 3) {
+ process.stdout.write("\nNo need to concatenate\n\n");
+ } else {
+ options = {};
+ options.src = process.argv;
+ options.src.shift();
+ options.src.shift();
+ options.dest = options.src.pop();
+ jsonConcat(options, function(err, json) {
+ return process.stdout.write("\nConcatenated to: " + options.dest + "\n\n");
+ });
+ }
+
+}).call(this);
diff --git a/node_modules/json-concat/lib/json-concat.js b/node_modules/json-concat/lib/json-concat.js
new file mode 100644
index 0000000..56a01e1
--- /dev/null
+++ b/node_modules/json-concat/lib/json-concat.js
@@ -0,0 +1,220 @@
+
+/*
+
+Concatenating Json Objects
+
+Author: @mugo_gocho
+License: MIT
+ */
+
+
+/*
+
+Notes:
+
+1. A result object is reused in order to avoid creating many arrays
+ then have to join them together. This makes it faster.
+2. Two alternative algorithms can be used to concatenate stringified
+ JSON objects:
+ i) Concatenate, use RegExp and Parse (algorithm 1)
+ - concatenate the stringified json objects
+ - use RegExp to try make the string a valid
+ stringified json object
+ - parse the result string into an object
+ ii) Parse and Join
+ - parse each string into a json object
+ - then loop through each of the objects assigning its
+ keys and values to a result object
+ Performance:
+ - I used jsperf.com to run performance test.
+ - algorithm 1 was faster than algorithm 2
+ - See test suite at http://jsperf.com/json-concat/
+ Discussion/Conclusion:
+ - Although algorithm 1 is faster, we use both. Reason
+ is that algorithm 2 is forgiving by letting us ignore
+ strings that can not be parsed into objects. algorithm
+ 1 makes it hard to rescue the situation if the final
+ string can not be parsed.
+ We use algorithm 1 at first. If it fails to realize an object,
+ we turn to algorithm 2 to scavange any objects it
+ can find.
+ */
+
+(function() {
+ "use strict";
+ var concat, exports, fs, path, readContent;
+
+ fs = require("fs");
+
+ path = require("path");
+
+
+ /*
+ Concatenates content from all JSON files encountered
+ This is recursive and will go into directories looking for files with
+ the extension ".json"
+
+ @param - {String} path to file/directory
+ @param - {Object} object that will hold the result (see note 1)
+ @param - {Function} callback(content, contentArray)
+ */
+
+ readContent = function(filepath, resultObject, callback) {
+ var encounteredFile, filesEncountered, filesProcessed, processedFile, read;
+ filesEncountered = 0;
+ filesProcessed = 0;
+ if (resultObject.contentString == null) {
+ resultObject.contentString = "";
+ }
+ if (resultObject.contentArray == null) {
+ resultObject.contentArray = [];
+ }
+ encounteredFile = function() {
+ return filesEncountered++;
+ };
+ processedFile = function(fileContent) {
+ if (fileContent == null) {
+ fileContent = "";
+ }
+ resultObject.contentString += fileContent;
+ if (fileContent) {
+ resultObject.contentArray.push(fileContent);
+ }
+ filesProcessed++;
+ if (filesProcessed === filesEncountered) {
+ return callback(resultObject);
+ }
+ };
+ if (typeof filepath === "object") {
+ resultObject.contentString += JSON.stringify(filepath);
+ resultObject.contentArray.push(filepath);
+ return callback(resultObject);
+ }
+ read = function(filepath) {
+ encounteredFile();
+ return fs.stat(filepath, function(err, stats) {
+ if (err) {
+ return processedFile(null);
+ }
+ if (stats.isDirectory()) {
+ return fs.readdir(filepath, function(err, files) {
+ var file, i, len;
+ if (err) {
+ return processedFile(null);
+ }
+ for (i = 0, len = files.length; i < len; i++) {
+ file = files[i];
+ read(path.join(filepath, file));
+ }
+ return processedFile(null);
+ });
+ } else if (stats.isFile()) {
+ if (path.extname(filepath) === ".json") {
+ return fs.readFile(filepath, {
+ encoding: "utf8"
+ }, function(err, content) {
+ if (err) {
+ return processedFile(null);
+ }
+ return processedFile(content);
+ });
+ } else {
+ return processedFile(null);
+ }
+ }
+ });
+ };
+ return read(filepath);
+ };
+
+
+ /*
+ Creates a new JSON object from a string of concatenated stringified
+ JSON objects.
+
+ @param - {String} string of json
+ @param - {Function} callback(validString, validObject)
+ */
+
+ concat = function(contentString, contentArray, callback) {
+ var content, err, error, error1, i, key, len, result, string, tmp, value;
+ if (contentString === "") {
+ return callback("{}", {});
+ }
+ string = contentString.replace(/^({\s*})*|({\s*})*$/g, "");
+ string = string.replace(/}\s*({\s*})*\s*{/g, ",");
+ string = string.replace(/}\s*{/g, ",");
+ try {
+ return callback(string, JSON.parse(string));
+ } catch (error) {
+ err = error;
+ result = {};
+ for (i = 0, len = contentArray.length; i < len; i++) {
+ content = contentArray[i];
+ try {
+ tmp = JSON.parse(content);
+ for (key in tmp) {
+ value = tmp[key];
+ result[key] = value;
+ }
+ } catch (error1) {
+ err = error1;
+ }
+ }
+ return callback(JSON.stringify(result), result);
+ }
+ };
+
+
+ /*
+ exported function
+ */
+
+ exports = module.exports = function(userOptions, callback) {
+ var index, options, result, start;
+ options = {
+ src: userOptions.src || process.cwd(),
+ dest: userOptions.dest || "./concat.json",
+ middleware: userOptions.middleware || false
+ };
+ if (userOptions.dest === null) {
+ options.dest = null;
+ }
+ if (typeof options.src === "string") {
+ options.src = [options.src];
+ }
+ result = {};
+ index = 0;
+ start = function(callback) {
+ var next;
+ next = function() {
+ return readContent(options.src[index], result, function() {
+ ++index;
+ if (index < options.src.length) {
+ return next();
+ }
+ return concat(result.contentString, result.contentArray, function(string, obj) {
+ if (options.dest) {
+ return fs.writeFile(options.dest, string, function(err) {
+ return callback(err, obj);
+ });
+ } else {
+ return callback(null, obj);
+ }
+ });
+ });
+ };
+ return next();
+ };
+ if (options.middleware) {
+ return function(req, res, next) {
+ return start(function(err, obj) {
+ return next(obj || {});
+ });
+ };
+ } else {
+ return start(callback);
+ }
+ };
+
+}).call(this);
diff --git a/node_modules/json-concat/package.json b/node_modules/json-concat/package.json
new file mode 100644
index 0000000..17d7698
--- /dev/null
+++ b/node_modules/json-concat/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "json-concat",
+ "version": "0.0.1",
+ "description": "concatenate json files and objects",
+ "homepage": "https://github.com/GochoMugo/json-concat",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/GochoMugo/json-concat.git"
+ },
+ "bugs": "https://github.com/GochoMugo/json-concat/issues",
+ "keywords": [
+ "json",
+ "concat",
+ "concatenate",
+ "express",
+ "connect",
+ "terminal"
+ ],
+ "author": {
+ "name": "GochoMugo",
+ "email": "mugo@forfuture.co.ke",
+ "url": "https://github.com/GochoMugo"
+ },
+ "main": "lib/json-concat.js",
+ "dependencies": {},
+ "devDependencies": {
+ "grunt": "^0.4.5",
+ "grunt-cli": "^0.1.13",
+ "grunt-contrib-clean": "^1.0.0",
+ "grunt-contrib-coffee": "^1.0.0",
+ "grunt-contrib-copy": "^0.8.0",
+ "grunt-mocha-test": "^0.12.7",
+ "istanbul": "^0.4.2",
+ "lodash": "^4.5.1",
+ "shelljs": "^0.6.0",
+ "should": "^8.2.2"
+ },
+ "bin": {
+ "json-concat": "./bin/json-concat"
+ },
+ "scripts": {
+ "test": "grunt test"
+ }
+}
diff --git a/old.me b/old.me
deleted file mode 100644
index 86593df..0000000
--- a/old.me
+++ /dev/null
@@ -1,253 +0,0 @@
-
-
-```
-sudo dnf showing-Aditya-Vijay card
-```
-
-```js
-const user = {
- name: "Aditya Vijay",
- age: "little more than the age of earth",
- theme: [ "one dark", "github dark" ],
- state: "oblivion",
-
- line_endings: "crlf",
- codeStyle: "Prettier",
- variables: "camelCase",
- trailing_comma: true,
-
- hobbies: [ "programming", "chess", "gaming", "breathing", "hiding dead bodies", ],
- languages: [ "C", "HTML", "JavaScript", "CSS", "flutter", "Java",],
- editors: [ "Android Studio", "VS Code", "Sublime" ],
-
- newLanguage: function () {
- console.log("Namaste, World!")
- },
-
- hereIsYourGame: function (game) {
- const good = [ "FPS", "Competitive", "AAA" ]
- const acceptable = JSON.parse(fs.readFileSync("acceptablegames.json"))
-
- if (good.includes(game)) {
- console.log("Ready! Shoot! Win!")
- } else {
- console.log("No, thanks.")
- }
- },
-}
-```
-
-
-
-About Me
-
-
-
-
-Name: Aditya | Vijay
-
-Nationality: Indian
-
-
-Loves: Video & Photo Editing, Graphic Designing
-
-
-Gender: he/him/Male
-
-
-Hobbys: Breathing , Hiding Dead Bodies, Programming, Playing Dino Game On Chrome.
-
-
-Working @: Dustland Developer
-
-
-Mail: kiriotheo@gmail.com
-
-
-βIn C we had to code our own bugs. In C++ we can inherit them.β
-
-
-
-
-
-
-
-
-
-
-
-
-
- Skills & Tools
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- :computer: Main Tech Knowledge
-
-
-![Java](https://img.shields.io/badge/JAVA-007396.svg?&style=flat&logo=java&logoColor=white)
-![JSF](https://img.shields.io/badge/JSF-323330.svg?&style=flat&logo=eclipse&logoColor=white)
-![Primefaces](https://img.shields.io/badge/PRIMEFACES-039BE5.svg?&style=flat&logoColor=white)
-![Angular](https://img.shields.io/badge/ANGULAR-DD0031.svg?&style=flat&logo=angular&logoColor=white)
-![Spring](https://img.shields.io/badge/SPRING-6DB33F.svg?&style=flat&logo=spring&logoColor=white)
-![Hibernate](https://img.shields.io/badge/HIBERNATE-121011.svg?&style=flat&logo=red-hat&logoColor=white) \
-![Flutter](https://img.shields.io/badge/FLUTTER-02569B.svg?&style=flat&logo=flutter&logoColor=white)
-![GetX](https://img.shields.io/badge/GETX-%23121011.svg?&style=flat&logo=getx&logoColor=white)
-![BLoC](https://img.shields.io/badge/BLOC-%23121011.svg?&style=flat&logo=bloc&logoColor=white)
-![MobX](https://img.shields.io/badge/MOBX-%23121011.svg?&style=flat&logo=mobx&logoColor=white)
-![Dart](https://img.shields.io/badge/DART-%230175C2.svg?&style=flat&logo=dart&logoColor=white) \
-![HTML5](https://img.shields.io/badge/HTML5-E34F26.svg?&style=flat&logo=html5&logoColor=white)
-![CSS3](https://img.shields.io/badge/CSS3-%231572B6.svg?&style=flat&logo=css3&logoColor=white)
-![JavaScript](https://img.shields.io/badge/JAVASCRIPT-323330.svg?&style=flat&logo=javascript&logoColor=%23F7DF1E)
-![TypeScript](https://img.shields.io/badge/TYPESCRIPT-%23007ACC.svg?&style=flat&logo=typescript&logoColor=white) \
-![Git](https://img.shields.io/badge/GIT-%23F05033.svg?&style=flat&logo=git&logoColor=white)
-![GitHub](https://img.shields.io/badge/GITHUB-%23121011.svg?&style=flat&logo=github&logoColor=white)
-![GitLab](https://img.shields.io/badge/GITLAB-%23181717.svg?&style=flat&logo=gitlab&logoColor=white)
-![Docker](https://img.shields.io/badge/DOCKER-2496ED.svg?&style=flat&logo=docker&logoColor=white)
-![Ansible](https://img.shields.io/badge/ANSIBLE-%231A1918.svg?&style=flat&logo=ansible&logoColor=white)
-![SonarQube](https://img.shields.io/badge/SONARQUBE-4E9BCD.svg?&style=flat&logo=sonarqube&logoColor=white) \
-![Postgres](https://img.shields.io/badge/POSTGRES-%23316192.svg?&style=flat&logo=postgresql&logoColor=white)
-![MySQL](https://img.shields.io/badge/MARIADB-4479A1.svg?&style=flat&logo=mariadb&logoColor=white)
-![SQLite](https://img.shields.io/badge/SQLITE-003B57.svg?&style=flat&logo=sqlite&logoColor=white)\
-![Ant](https://img.shields.io/badge/ANT-A81C7D.svg?&style=flat&logo=apache-ant)
-![Maven](https://img.shields.io/badge/MAVEN-C71A36.svg?&style=flat&logo=apache-maven)
-![Gradle](https://img.shields.io/badge/GRADLE-02303A.svg?&style=flat&logo=gradle)
-![REST API](https://img.shields.io/badge/REST-02569B.svg?&style=flat&logo=rest&logoColor=white)
-![GRAPHQL](https://img.shields.io/badge/GRAPHQL-E10098.svg?&style=flat&logo=graphql&logoColor=white) \
-![LINUX](https://img.shields.io/badge/LINUX-FCC624?style=flat-square&logo=linux&logoColor=black)
-![VSCode](https://img.shields.io/badge/VSCODE-007ACC.svg?&style=flat&logo=visual-studio-code)
-![Eclipse](https://img.shields.io/badge/ECLIPSE-2C2255.svg?&style=flat&logo=eclipse)
-![IntelliJ](https://img.shields.io/badge/INTELLIJ-000000.svg?&style=flat&logo=intellij-idea) \
-![Clean Architecture](https://img.shields.io/badge/CLEAN%20ARCHITECTURE-6DB33F.svg?&style=flat&logoColor=white)
-![Hexagonal Architecture](https://img.shields.io/badge/HEXAGONAL-2496ED.svg?&style=flat&logoColor=white)
-![MVC Architecture](https://img.shields.io/badge/MVC-888888.svg?&style=flat&logoColor=white)
-![MVVM Architecture](https://img.shields.io/badge/MVVM-888888.svg?&style=flat&logoColor=white) \
-![DDD](https://img.shields.io/badge/DOMAIN%20DD-02569B.svg?&style=flat&logo=ddd&logoColor=white)
-![TDD](https://img.shields.io/badge/TEST%20DD-E34F26.svg?&style=flat&logo=tdd&logoColor=white)
-![PMBOK](https://img.shields.io/badge/PMBOK-DD0031.svg?&style=flat&logo=ddd&logoColor=white)
-![SCRUM](https://img.shields.io/badge/SCRUM-6DB33F.svg?&style=flat&logo=ddd&logoColor=white)
-
-
-
-
-
-
-
- :brain: Others, Always Learning
-
-
-![Kotlin](https://img.shields.io/badge/KOTLIN-0095D5.svg?&style=flat&logo=kotlin&logoColor=white)
-![Firebase](https://img.shields.io/badge/FIREBASE-FFCA28.svg?&style=flat&logo=firebase&logoColor=black)
-![NestJS](https://img.shields.io/badge/NESTJS-E0234E.svg?&style=flat&logo=nestjs&logoColor=white)
-![NodeJS](https://img.shields.io/badge/NODEJS-339933.svg?&style=flat&logo=node.js&logoColor=white) \
-![Redis](https://img.shields.io/badge/REDIS-DC382D.svg?&style=flat&logo=redis&logoColor=white)
-![Nginx](https://img.shields.io/badge/NGINX-269539.svg?&style=flat&logo=nginx&logoColor=white)
-![GRPC](https://img.shields.io/badge/GRPC-4285F4.svg?&style=flat&logo=google&logoColor=white)
-![Kafka](https://img.shields.io/badge/APACHA%20KAFKA-231F20.svg?&style=flat&logo=apache-kafka&logoColor=white) \
-![Kubernetes](https://img.shields.io/badge/KUBERNETES-326CE5.svg?&style=flat&logo=kubernetes&logoColor=white)
-![Puppet](https://img.shields.io/badge/PUPPET-FFAE1A.svg?&style=flat&logo=puppet&logoColor=black)
-![GithubActions](https://img.shields.io/badge/GITHUB%20ACTIONS-2088FF.svg?&style=flat&logo=github-actions&logoColor=white) \
-![GCP](https://img.shields.io/badge/GOOGLE%20CLOUD%20PLATAFORM-4285F4.svg?&style=flat&logo=google-cloud&logoColor=white)
-![AWS](https://img.shields.io/badge/AMAZON%20AWS-232F3E.svg?&style=flat&logo=amazon-aws&logoColor=white)
-![Oracle](https://img.shields.io/badge/ORACLE-F80000.svg?&style=flat&logo=oracle&logoColor=white) \
-![Onion Architecture](https://img.shields.io/badge/ONION%20ARCHITECTURE-A81C7D.svg?&style=flat&logoColor=white)
-![BDD](https://img.shields.io/badge/BEHAVIOR%20DD-4479A1.svg?&style=flat&logo=bdd&logoColor=white)
-![MongoDB](https://img.shields.io/badge/MONGODB-47A248.svg?&style=flat&logo=mongodb&logoColor=white)
-![Python](https://img.shields.io/badge/PYTHON-3776AB.svg?&style=flat&logo=python&logoColor=white) \
-![Cpp](https://img.shields.io/badge/C++-00599C.svg?&style=flat&logo=c%2B%2B&logoColor=white)
-![Arduino](https://img.shields.io/badge/ARDUINO-00979D.svg?&style=flat&logo=arduino&logoColor=white)
-![JQuery](https://img.shields.io/badge/JQUERY-0769AD.svg?&style=flat&logo=jquery&logoColor=white)
-![JSP](https://img.shields.io/badge/JSP-323330.svg?&style=flat&logo=eclipse&logoColor=white)
-![SASS](https://img.shields.io/badge/SASS-CC6699.svg?&style=flat&logo=sass&logoColor=white)
-![PHP](https://img.shields.io/badge/PHP-777BB4.svg?&style=flat&logo=php&logoColor=white) \
-![PHOTOSHOP](https://img.shields.io/badge/PHOTOSHOP-31A8FF.svg?&style=flat&logo=adobe-photoshop&logoColor=white)
-![XD](https://img.shields.io/badge/XD-FFC0CB.svg?&style=flat&logo=adobe-xd&logoColor=black)
-![ILLUSTRATOR](https://img.shields.io/badge/ILLUSTRATOR-FFAE1A.svg?&style=flat&logo=adobe-illustrator&logoColor=black) \
-![Blockchain](https://img.shields.io/badge/BLOCKCHAIN-121D33.svg?&style=flat&logo=blockchain-dot-com&logoColor=white)
-![Cryptocurrencies](https://img.shields.io/badge/CRYPTOCURRENCY-00979D.svg?&style=flat&logo=cryptocurrency&logoColor=black)
-![Bitcoin](https://img.shields.io/badge/BITCOIN-0769AD.svg?&style=flat&logo=bitcoin&logoColor=black)
-![Ethereum](https://img.shields.io/badge/ETHEREUM-3C3C3D.svg?&style=flat&logo=ethereum&logoColor=white)
-
-
-
-
- :gear: GitHub Stats
-
-
-
-
-
-
-
-
-
-
-
-[![@kiriotheo's Holopin board](https://holopin.me/kiriotheo)](https://holopin.io/@kiriotheo)
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..119c0b1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,29 @@
+{
+ "name": "react-native-essentials",
+ "version": "0.0.1",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "react-native-essentials",
+ "version": "0.0.1",
+ "license": "MIT",
+ "devDependencies": {
+ "json-concat": "^0.0.1"
+ },
+ "engines": {
+ "vscode": "^1.30.0"
+ }
+ },
+ "node_modules/json-concat": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/json-concat/-/json-concat-0.0.1.tgz",
+ "integrity": "sha512-clK755bwGKlpRESYivScHgyaMV+aChahmbywnpACF8CEECgtXFAh9dWuym7h0FwlyawjldN80uEXf9BcxeKVPA==",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "json-concat": "bin/json-concat"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d32838c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,62 @@
+{
+ "name": "ReactSnipp",
+ "displayName": "React Snipp ~ Snippets you need.",
+ "description": "Supercharge your React development with essential code snippets and utilities for a faster, smoother workflow.",
+ "version": "0.0.3",
+ "icon": "images/logo.png",
+ "publisher": "adityavijay21",
+ "engines": {
+ "vscode": "^1.30.0"
+ },
+ "categories": [
+ "Snippets"
+ ],
+ "keywords": [
+ "react-native",
+ "javascript",
+ "typescript",
+ "snippets",
+ "react-navigation",
+ "redux",
+ "async-storage",
+ "mobile-development",
+ "frontend",
+ "ui"
+ ],
+ "contributes": {
+ "snippets": [
+ {
+ "language": "javascript",
+ "path": "./snippets/snippets.code-snippets"
+ },
+ {
+ "language": "javascriptreact",
+ "path": "./snippets/snippets.code-snippets"
+ },
+ {
+ "language": "typescript",
+ "path": "./snippets/snippets.code-snippets"
+ },
+ {
+ "language": "typescriptreact",
+ "path": "./snippets/snippets.code-snippets"
+ }
+ ]
+ },
+ "devDependencies": {
+ "json-concat": "^0.0.2"
+ },
+ "scripts": {
+ "concat": "json-concat snippets/types/ snippets/snippets.code-snippets"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/adityavijay21/reactsnipp.git"
+ },
+ "bugs": {
+ "url": "https://github.com/adityavijay21/reactsnipp.git"
+ },
+ "homepage": "https://github.com/adityavijay21/reactsnipp#readme",
+ "license": "MIT"
+ }
+
\ No newline at end of file
diff --git a/snippets/.DS_Store b/snippets/.DS_Store
new file mode 100644
index 0000000..2aa2aca
Binary files /dev/null and b/snippets/.DS_Store differ
diff --git a/snippets/snippets.code-snippets b/snippets/snippets.code-snippets
new file mode 100644
index 0000000..386e0e5
--- /dev/null
+++ b/snippets/snippets.code-snippets
@@ -0,0 +1,249 @@
+{
+ "Import React": {
+ "prefix": "imr",
+ "body": "import React from 'react';"
+ },
+ "Import React / Component": {
+ "prefix": "imrc",
+ "body": "import React, { Component } from 'react';"
+ },
+ "Import ReactDOM": {
+ "prefix": "imrd",
+ "body": "import ReactDOM from 'react-dom';"
+ },
+ "Import React / useState": {
+ "prefix": "imrs",
+ "body": "import React, { useState } from 'react';"
+ },
+ "Import React / useState useEffect": {
+ "prefix": "imrse",
+ "body": "import React, { useState, useEffect } from 'react';"
+ },
+ "Import PropTypes": {
+ "prefix": "impt",
+ "body": "import PropTypes from 'prop-types';"
+ },
+ "Import React / PureComponent": {
+ "prefix": "impc",
+ "body": "import React, { PureComponent } from 'react';"
+ },
+ "Class Component": {
+ "prefix": "cc",
+ "body": [
+ "class ${1:ComponentName} extends Component {",
+ " render() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ " }",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Class Component With Constructor": {
+ "prefix": "ccc",
+ "body": [
+ "class ${1:ComponentName} extends Component {",
+ " constructor(props) {",
+ " super(props);",
+ " this.state = {",
+ " $2",
+ " };",
+ " }",
+ "",
+ " render() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ " }",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Class Pure Component": {
+ "prefix": "cpc",
+ "body": [
+ "class ${1:ComponentName} extends PureComponent {",
+ " render() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ " }",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Function Component": {
+ "prefix": "ffc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "function ${1:ComponentName}() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Arrow Function Component": {
+ "prefix": "afc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:ComponentName} = () => {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "};",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "useEffect Hook": {
+ "prefix": "uef",
+ "body": [
+ "useEffect(() => {",
+ " $1",
+ " return () => {",
+ " $0",
+ " };",
+ "}, []);"
+ ]
+ },
+ "useCallback Hook": {
+ "prefix": "ucb",
+ "body": [
+ "const ${1:memoizedCallback} = useCallback(() => {",
+ " $2",
+ "}, [$0]);"
+ ]
+ },
+ "useMemo Hook": {
+ "prefix": "ume",
+ "body": [
+ "const ${1:memoizedValue} = useMemo(() => {",
+ " return $2;",
+ "}, [$0]);"
+ ]
+ },
+ "getDerivedStateFromProps": {
+ "prefix": "gds",
+ "body": [
+ "static getDerivedStateFromProps(nextProps, prevState) {",
+ " $0",
+ " return null;",
+ "}"
+ ]
+ },
+ "shouldComponentUpdate": {
+ "prefix": "scu",
+ "body": [
+ "shouldComponentUpdate(nextProps, nextState) {",
+ " $0",
+ " return true;",
+ "}"
+ ]
+ },
+ "componentDidUpdate": {
+ "prefix": "cdu",
+ "body": [
+ "componentDidUpdate(prevProps, prevState) {",
+ " $0",
+ "}"
+ ]
+ },
+ "componentWillUnmount": {
+ "prefix": "cwun",
+ "body": [
+ "componentWillUnmount() {",
+ " $0",
+ "}"
+ ]
+ },
+ "componentDidCatch": {
+ "prefix": "cdc",
+ "body": [
+ "componentDidCatch(error, info) {",
+ " $0",
+ "}"
+ ]
+ },
+ "getSnapshotBeforeUpdate": {
+ "prefix": "gsbu",
+ "body": [
+ "getSnapshotBeforeUpdate(prevProps, prevState) {",
+ " $0",
+ " return null;",
+ "}"
+ ]
+ },
+ "setState": {
+ "prefix": "ss",
+ "body": [
+ "this.setState((prevState, props) => ({",
+ " $0",
+ "}));"
+ ]
+ },
+ "Declare a new state variable using State Hook": {
+ "prefix": "usf",
+ "body": [
+ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"
+ ]
+ },
+ "Render Prop": {
+ "prefix": "rprop",
+ "body": [
+ "${1:renderProp}={({ ${2:prop} }) => (",
+ " $0",
+ ")}"
+ ]
+ },
+ "Higher Order Component": {
+ "prefix": "hoc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:withSomething} = (WrappedComponent) => {",
+ " return class extends React.Component {",
+ " render() {",
+ " return ;",
+ " }",
+ " };",
+ "};",
+ "",
+ "export default ${1:withSomething};"
+ ]
+ },
+ "Context Provider": {
+ "prefix": "cp",
+ "body": [
+ "<${1:Context}.Provider value={${2:value}}>",
+ " ${0}",
+ "${1:Context}.Provider>"
+ ]
+ },
+ "Class Property Function": {
+ "prefix": "cpf",
+ "body": [
+ "${1:propertyName} = (${2:params}) => {",
+ " $0",
+ "};"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/snippets/types/React.json b/snippets/types/React.json
new file mode 100644
index 0000000..386e0e5
--- /dev/null
+++ b/snippets/types/React.json
@@ -0,0 +1,249 @@
+{
+ "Import React": {
+ "prefix": "imr",
+ "body": "import React from 'react';"
+ },
+ "Import React / Component": {
+ "prefix": "imrc",
+ "body": "import React, { Component } from 'react';"
+ },
+ "Import ReactDOM": {
+ "prefix": "imrd",
+ "body": "import ReactDOM from 'react-dom';"
+ },
+ "Import React / useState": {
+ "prefix": "imrs",
+ "body": "import React, { useState } from 'react';"
+ },
+ "Import React / useState useEffect": {
+ "prefix": "imrse",
+ "body": "import React, { useState, useEffect } from 'react';"
+ },
+ "Import PropTypes": {
+ "prefix": "impt",
+ "body": "import PropTypes from 'prop-types';"
+ },
+ "Import React / PureComponent": {
+ "prefix": "impc",
+ "body": "import React, { PureComponent } from 'react';"
+ },
+ "Class Component": {
+ "prefix": "cc",
+ "body": [
+ "class ${1:ComponentName} extends Component {",
+ " render() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ " }",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Class Component With Constructor": {
+ "prefix": "ccc",
+ "body": [
+ "class ${1:ComponentName} extends Component {",
+ " constructor(props) {",
+ " super(props);",
+ " this.state = {",
+ " $2",
+ " };",
+ " }",
+ "",
+ " render() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ " }",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Class Pure Component": {
+ "prefix": "cpc",
+ "body": [
+ "class ${1:ComponentName} extends PureComponent {",
+ " render() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ " }",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Function Component": {
+ "prefix": "ffc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "function ${1:ComponentName}() {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "}",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "Arrow Function Component": {
+ "prefix": "afc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:ComponentName} = () => {",
+ " return (",
+ " ",
+ " $0",
+ "
",
+ " );",
+ "};",
+ "",
+ "export default ${1:ComponentName};"
+ ]
+ },
+ "useEffect Hook": {
+ "prefix": "uef",
+ "body": [
+ "useEffect(() => {",
+ " $1",
+ " return () => {",
+ " $0",
+ " };",
+ "}, []);"
+ ]
+ },
+ "useCallback Hook": {
+ "prefix": "ucb",
+ "body": [
+ "const ${1:memoizedCallback} = useCallback(() => {",
+ " $2",
+ "}, [$0]);"
+ ]
+ },
+ "useMemo Hook": {
+ "prefix": "ume",
+ "body": [
+ "const ${1:memoizedValue} = useMemo(() => {",
+ " return $2;",
+ "}, [$0]);"
+ ]
+ },
+ "getDerivedStateFromProps": {
+ "prefix": "gds",
+ "body": [
+ "static getDerivedStateFromProps(nextProps, prevState) {",
+ " $0",
+ " return null;",
+ "}"
+ ]
+ },
+ "shouldComponentUpdate": {
+ "prefix": "scu",
+ "body": [
+ "shouldComponentUpdate(nextProps, nextState) {",
+ " $0",
+ " return true;",
+ "}"
+ ]
+ },
+ "componentDidUpdate": {
+ "prefix": "cdu",
+ "body": [
+ "componentDidUpdate(prevProps, prevState) {",
+ " $0",
+ "}"
+ ]
+ },
+ "componentWillUnmount": {
+ "prefix": "cwun",
+ "body": [
+ "componentWillUnmount() {",
+ " $0",
+ "}"
+ ]
+ },
+ "componentDidCatch": {
+ "prefix": "cdc",
+ "body": [
+ "componentDidCatch(error, info) {",
+ " $0",
+ "}"
+ ]
+ },
+ "getSnapshotBeforeUpdate": {
+ "prefix": "gsbu",
+ "body": [
+ "getSnapshotBeforeUpdate(prevProps, prevState) {",
+ " $0",
+ " return null;",
+ "}"
+ ]
+ },
+ "setState": {
+ "prefix": "ss",
+ "body": [
+ "this.setState((prevState, props) => ({",
+ " $0",
+ "}));"
+ ]
+ },
+ "Declare a new state variable using State Hook": {
+ "prefix": "usf",
+ "body": [
+ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"
+ ]
+ },
+ "Render Prop": {
+ "prefix": "rprop",
+ "body": [
+ "${1:renderProp}={({ ${2:prop} }) => (",
+ " $0",
+ ")}"
+ ]
+ },
+ "Higher Order Component": {
+ "prefix": "hoc",
+ "body": [
+ "import React from 'react';",
+ "",
+ "const ${1:withSomething} = (WrappedComponent) => {",
+ " return class extends React.Component {",
+ " render() {",
+ " return ;",
+ " }",
+ " };",
+ "};",
+ "",
+ "export default ${1:withSomething};"
+ ]
+ },
+ "Context Provider": {
+ "prefix": "cp",
+ "body": [
+ "<${1:Context}.Provider value={${2:value}}>",
+ " ${0}",
+ "${1:Context}.Provider>"
+ ]
+ },
+ "Class Property Function": {
+ "prefix": "cpf",
+ "body": [
+ "${1:propertyName} = (${2:params}) => {",
+ " $0",
+ "};"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/vsc-extension-quickstart.md b/vsc-extension-quickstart.md
new file mode 100644
index 0000000..2fadf67
--- /dev/null
+++ b/vsc-extension-quickstart.md
@@ -0,0 +1,23 @@
+# Welcome to your VS Code Extension
+
+## What's in the folder
+
+* This folder contains all of the files necessary for your extension.
+* `package.json` - this is the manifest file that defines the location of the snippet file and specifies the language of the snippets.
+* `snippets/snippets.code-snippets` - the file containing all snippets.
+
+## Get up and running straight away
+
+* Press `F5` to open a new window with your extension loaded.
+* Create a new file with a file name suffix matching your language.
+* Verify that your snippets are proposed on IntelliSense.
+
+## Make changes
+
+* You can relaunch the extension from the debug toolbar after making changes to the files listed above.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+## Install your extension
+
+* To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code.
+* To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.