[WIP] Show component

Author: nDriaDev

apps/react-tools-demo/src/markdown/Show.md

@@ -0,0 +1,44 @@
+# 
+
+
+## Usage
+
+```tsx
+
+export default function ShowComponent() {
+	const [c, setC] = useState(0);
+	useEffect(() => {
+		const interval = setInterval(() => setC(c => c + 1), 1000);
+		return () => clearInterval(interval);
+	}, []);
+	return (
+		<div>
+			<h1>Hello StackBlitz!</h1>
+			<p>Start editing to see some magic happen :)</p>
+			<Show when={c % 2 === 0} fallback={"loading..."}>
+				<p>Done</p>
+			</Show>
+		</div>
+	);
+}
+```
+
+
+
+
+## API
+
+```tsx
+Show = ({ when, fallback, children }: PropsWithChildren<{ when: boolean, fallback?: ReactNode }>)
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> 
+> 
+>

apps/react-tools-demo/src/markdown/createPubSubStore.md

@@ -12,7 +12,6 @@ const store = createPubSubStore(
 			name: "",
 			eta: 0
 		},
-		counter: 0,
 		spinner: false
 	},
 	{
@@ -26,9 +25,6 @@ export const { usePubSubStore, mutateStore } = store;
 //import {usePubSubStore} from '../store.ts';
 const Comp1 = () => {
 	const [state, setState] = usePubSubStore(store => store.user);
-	useEffect(() => {
-		console.log(state);
-	}, [state])
 
 	return <div>
 		<label htmlFor="id">ID:</label>
@@ -58,15 +54,9 @@ const Comp2 = memo(() => {
 //import {usePubSubStore} from '../store.ts';
 export const CreatePubSubStore = () => {
 	const [spinner] = usePubSubStore(store => store.spinner);
-	const [counter, setCounter] = usePubSubStore(store => store.counter);
-	useEffect(() => {
-		const id = setInterval(() => setCounter(counter => counter++), 1000);
-		return () => clearInterval(id);
-	}, [setCounter])
 	return <div style={{ display: "grid", gridTemplateRows: "auto auto", gap: 20, justifyContent: "center" }}>
 		<fieldset style={{padding: 20}}>
 			<legend>Component 2</legend>
-			<p>{counter}</p>
 			<Comp2 />
 		</fieldset>
 		{

…t-tools/src/components/LazyComponent.tsx …ages/react-tools/src/components/Lazy.tsxpackages/react-tools/src/components/LazyComponent.tsx renamed to packages/react-tools/src/components/Lazy.tsx packages/react-tools/src/components/LazyComponent.tsx renamed to packages/react-tools/src/components/Lazy.tsx

@@ -32,7 +32,7 @@ const DynamicComponent = ({ factory, beforeLoad, afterLoad }: { factory: () => P
 	throw current.promise;
 };
 
-export const LazyComponent = <T extends ComponentType<unknown>>({ factory, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T | { default: T }>, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void }) => {
+export const Lazy = <T extends ComponentType<unknown>>({ factory, fallback, beforeLoad, afterLoad }: { factory: () => Promise<T | { default: T }>, fallback?: ReactNode, beforeLoad?: ()=>void, afterLoad?: ()=>void }) => {
 	return <Suspense fallback={fallback}>
 		<DynamicComponent factory={factory} beforeLoad={beforeLoad} afterLoad={afterLoad} />
 	</Suspense>

packages/react-tools/src/components/Show.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactNode } from "react";
+
+export const Show = ({ when, fallback, children }: PropsWithChildren<{ when: boolean, fallback?: ReactNode }>) => {
+	if (!when) {
+		return fallback ? fallback : null;
+	}
+	return children;
+}

packages/react-tools/src/components/index.ts

@@ -0,0 +1,2 @@
+export { Lazy } from './Lazy';
+export { Show } from './Show';

packages/react-tools/src/index.ts

@@ -206,6 +206,11 @@ export {
 	createPubSubStore
 } from './hooks'
 
+export {
+	Show,
+	Lazy
+} from './components'
+
 export {
 	isShallowEqual,
 	isDeepEqual,