A collection of react tools
npm install @alexrah/react-toolkitA collection of react tools
``bash`
pnpm install @alexrah/react-toolkit
This function merges Tailwind CSS classes without style conflicts. It's a combination of clsx and tailwind-merge.
Usage:
`tsx
import { cn } from '@alexrah/react-toolkit/utils';
function MyComponent({ className }: { className?: string }) {
return
$3
A utility for triggering LSP completions for Tailwind CSS class names dynamically.
Usage:
`tsx
import { tw } from '@alexrah/react-toolkit/utils';const myClassName = tw
bg-red-500;
`Scripts
-
pnpm build: Compiles the TypeScript code.
- pnpm typecheck: Runs the TypeScript compiler to check for type errors without emitting files.
- pnpm clean: Removes the dist directory and TypeScript build info files.
- pnpm prepublishOnly: Cleans and builds the project before publishing.
- pnpm lint: Lints the codebase using ESLint.
- pnpm lint:fix: Lints the codebase and automatically fixes issues.Dependencies
- clsx: A tiny (228B) utility for constructing
className strings conditionally.
- tailwind-merge: A utility function to merge Tailwind CSS classes in JS without style conflicts.Dev Dependencies
- eslint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- rimraf: A deep deletion module for node (like
rm -rf`).