Solid Modal

Features:

• Simple use
• Smooth modal
• Hamburger
• Clear on route change
• Use any where with your costume wrapper

install

pnpm add solid-modals

or npm/yarn

Init

base init in Solid-start app

// app.tsx
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { ModalRoot } from "solid-modals";


export default function App() {
	return (
		<Router
			root={(props) => (
					<Suspense>
						{props.children}
						<ModalRoot />
					</Suspense>
			)}
		>
			<FileRoutes />
		</Router>
	);
}

Base Modal

// TestModal   .tsx
import { ModalBase, useModal } from "solid-modals";


export function TestModal() {
	const { onModal, onClear } = useModal();

	function onBaseModal() {
		onModal(
			<ModalBase onClear={onClear}>
				<div>hi</div>
			</ModalBase>
		);
	}

	return <button onClick={onBaseModal}>open modal</button>;
}

Hamburger

import { ModalHamburger, useModal } from "solid-modals";


export function TestHamburgerModal() {
	const { onModal, onClear } = useModal();

	function onHamburger() {
		onModal(
			<ModalHamburger onClear={onClear}>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</ModalHamburger>
		);
	}

	return <button onClick={onHamburger}>open modal</button>;
}