Integrations

Denji provides lifecycle hooks that allow you to integrate with popular linters and formatters. Hooks run shell commands automatically after operations like adding or removing icons, ensuring your generated code stays formatted and lint-free.

Available Tools

Available Hooks

Denji supports the following lifecycle hooks:

• preAdd - Before adding icons
• postAdd - After adding icons (most common)
• preRemove - Before removing icons
• postRemove - After removing icons
• preClear - Before clearing all icons
• postClear - After clearing all icons
• preList - Before listing icons
• postList - After listing icons

Configuration Format

Hooks are configured in your denji.json file:

{
  "output": "./src/icons.tsx",
  "framework": "react",
  "typescript": true,
  "hooks": {
    "postAdd": [
      "npx biome check --write ./src/icons.tsx"
    ]
  }
}

Each hook accepts an array of shell commands that run sequentially. If any command fails (exits with non-zero code), subsequent commands in that hook won't run.

Quick Examples

{
  "hooks": {
    "postAdd": [
      "npx @biomejs/biome check --write ./src/icons.tsx"
    ]
  }
}

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix ./src/icons.tsx",
      "npx prettier --write ./src/icons.tsx"
    ]
  }
}

{
  "hooks": {
    "postAdd": [
      "npx ultracite fix ./src/icons.tsx"
    ]
  }
}

{
  "hooks": {
    "postAdd": [
      "npx oxlint@latest ./src/icons.tsx",
      "npx oxc@latest fmt ./src/icons.tsx"
    ]
  }
}

Best Practices

1. Keep hooks fast - Hooks run after every operation, so use focused commands
2. Use postAdd for formatting - This is the most common use case
3. Avoid side effects - Hooks should only operate on the icons file
4. Test your hooks - Run denji add with a test icon to verify hooks work
5. Use consistent tools - Don't mix conflicting formatters (e.g., Prettier + Biome)
6. Commit your config - Share hook configuration with your team via version control

Package Manager Support

Denji hooks work with any package manager. Adjust commands based on your setup:

{
  "hooks": {
    "postAdd": ["npx biome check --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["pnpm exec biome check --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["yarn exec biome check --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["bunx biome check --write ./src/icons.tsx"]
  }
}

Next Steps

Choose a tool from the list above to see detailed integration instructions and examples.