Socket
Socket
Sign inDemoInstall

typed-htmx

Package Overview
Dependencies
1
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

typed-htmx

Definitions for htmx attributes in JSX


Version published
Maintainers
1
Created

Changelog

Source

0.3.1

  • Fix bug introduced in last version, which disallowed ambient type imports
  • More completions for hx-on- and hx-target

Readme

Source

typed-htmx

npm docs tests

demo

Definitions for htmx attributes in JSX.

Usage

You can configure typed-htmx either as pure type declarations, or as a JSX templating engine.

As type declarations

Configure your tsconfig.json as follows:

{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node16", // or "nodenext"
    "types": ["typed-htmx" /** and any other types you need */]
  }
}

An alternative is to include a triple-slash directive wherever you need completions for htmx attributes:

/// <reference types="typed-htmx" />

function MyComponent({ children }) {
  return <div hx-get="/asd">{children}</div>;
  //          ^?: string | undefined
}

If your frontend library injects its own JSX types, you'll need to augment it. See the example project for a demo. typed-html and React are supported out of the box.

As a JSX templating engine

If you prefer to use JSX only for its templating capabilities in the vein of typed-html, you can use typed-htmx/typed-html which is included with this library and optimized for htmx usage:

  • Attributes such as hx-vals and hx-headers may also accept an object literal, which will be stringified on demand.
  • Configurable options for sanitization, defaults to a no-op.

Configure your tsconfig.json as follows:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "typed-htmx/typed-html",
    "moduleResolution": "node16" // or "nodenext"
  }
}

Keywords

FAQs

Last updated on 14 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc