sql

@tailwind-stack/sql

Like TailwindCSS, but for SQL. className your way to database queries!

Installation

npm install @tailwind-stack/sql

Usage

import { DB } from "@tailwind-stack/sql";

<DB className="db-users-name-where-id-1" />;

Syntax

db-{table}-{column}-where-{field}-{value}-limit-{n}-orderby-{field}-{asc|desc}

Part	Description
db-{table}	Table name
-{column}	Columns to select
-where-{field}-{value}	Filter condition
-limit-{n}	Limit results
-orderby-{field}-{asc|desc}	Order by

Examples

// Single value
<DB className="db-users-name-where-id-1" />

// List with limit
<DB className="db-products-title-limit-5" as="ul" />

// Ordered results
<DB className="db-posts-title-orderby-likes-desc-limit-10" as="ol" />

// Table output
<DB className="db-users-name-email-limit-5" as="table" />

// JSON output
<DB className="db-users-limit-3" as="json" />

Joins

import { DB, Join } from "@tailwind-stack/sql";

<DB className="db-users-name-limit-5" as="table">
  <Join table="posts" on="id-author_id" select="title" />
</DB>;

Join Props

Prop	Description
table	Table to join
on	{parentCol}-{childCol}
select	Columns to select
type	inner | left | right

Token Syntax (Children)

Use $$ to inject data into children:

<DB className="db-users-email-where-id-1">
  <QR className="qr-encode-[$$]" />
</DB>

Token	Result
$$	Result value
$$.field	Specific field

Render Formats

Format	Output
span	Comma-separated
div	Block elements
ul / ol	List
table	HTML table
json / code	JSON block

Props

Prop	Type	Default	Description
className	string	-	SQL directive
as	RenderAs	"span"	Render format
style	CSSProperties	-	Inline styles
children	ReactNode	-	Join components or $$ tokens

License

MIT