Ts react/functional component #210

Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,5 +15,23 @@
		"code": "type Exclusive<T, U = T> = T \| U extends Record<string, unknown>\n ?\n \| ({ [P in Exclude<keyof T, keyof U>]?: never } & U)\n \| ({ [P in Exclude<keyof U, keyof T>]?: never } & T)\n : T \| U;\n\n\n// Usage:\ntype A = { name: string; email?: string; provider?: string };\ntype B = { name: string; phone?: string; country?: string };\n\ntype EitherOr = Exclusive<A, B>;\n\nconst w: EitherOr = { name: \"John\", email: \"j@d.c\" }; // ✅\nconst x: EitherOr = { name: \"John\", phone: \"+123 456\" }; // ✅\nconst y: EitherOr = { name: \"John\", email: \"\", phone: \"\" }; // ⛔️\nconst z: EitherOr = { name: \"John\", phne: \"\", provider: \"\" }; // ⛔️\n"
		}
		]
	},
	{
	"name": "React Helpers",
	"snippets": [
	{
	"title": "Functional Component",
	"description": "Functional component for React JS with props.",
	"author": "gihanrangana",
	"tags": [
	"typescript",
	"fuctional-component",
	"react-props",
	"reactjs"
	],
	"contributors": [],
	"code": "import React from 'react';\n\ninterface ComponentNameProps {\n // Define specific props here\n}\n\nconst ComponentName: React.FC<ComponentNameProps> = (props) => {\n return (\n <div>\n {/* Add component content here */}\n </div>\n );\n};\n\nexport default ComponentName;\n"
	}
	]
		}
		]

Show comments View file Open in desktop

Copy link

Collaborator

The reason will be displayed to describe this comment to others. Learn more.

This does not qualify as a snippet under the guidelines of Quicksnip, this is an example.

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,24 @@
	---
	title: Functional Component
	description: Functional component for React JS with props.
	author: gihanrangana
	tags: typescript,fuctional-component,react-props,reactjs
	---

	```tsx
	import React from 'react';

	interface ComponentNameProps {
	// Define specific props here
	}

	const ComponentName: React.FC<ComponentNameProps> = (props) => {
	return (
	<div>
	{/* Add component content here */}
	</div>
	);
	};

	export default ComponentName;
	```

Navigation Menu