@tw-classed/core - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

package.json

		{
		"name": "@tw-classed/core",
		"version": "1.0.0-alpha.1",
		"version": "1.0.0-alpha.2",
		"description": "A Stitches & Styled-Components inspired library to create reusable Tailwind react components",
		@@ -5,0 +5,0 @@ "type": "module",

readme.md

		@@ -11,5 +11,2 @@ ![tw-classed](https://raw.githubusercontent.com/sannajammeh/tw-classed/master/tw-classed.jpg)

		\| :zap: This is an ESM only package, use with a bundler that supports it or pre-compile! \|
		\| -------------------------------------------------------------------------------------- \|

		```bash
		@@ -21,101 +18,10 @@ npm i tw-classed

		```tsx
		// With `tw-classed`
		import classed from "tw-classed";
		const Button = classed("button", "bg-blue-500 text-white p-4 rounded-md");

		// Without `tw-classed`
		import { forwardRef } from "react";
		type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

		const Button = forwardRef<HTMLButtonElement, ButtonProps>(
		({ className, children, ...props }, ref) => (
		<button
		className="bg-blue-500 text-white p-4 rounded-md"
		ref={ref}
		{...props}
		>
		{children}
		</button>
		)
		);
		```

		##### Multiple argument support

		```tsx
		// Grid.tsx
		import classed from "tw-classed";

		const Grid = classed(
		"div",
		"grid-cols-1 gap-4",
		"md:grid-cols-2",
		"lg:grid-cols-3",
		"xl:grid-cols-4"
		);

		export default Grid;
		```

		##### Using Variants

		Insert an object as an argument to `classed` to define variants and defaultVariants for the component.
		Later use the key i.e color prop to set the variant.

		```tsx
		// Button.tsx
		import classed from "tw-classed";

		const Button = classed("button", "p-4 rounded-md", {
		variants: {
		color: {
		blue: "bg-blue-500 text-white",
		primary: "bg-indigo-500 text-white",
		},
		},
		defaultVariants: {
		color: "blue",
		},
		});

		const MyApp = () => {
		return (
		<>
		<Button color="primary">Im the primary color</Button>
		<Button color="blue">Im the blue color</Button>
		<Button>Im the default color (blue)</Button>
		</>
		);
		};
		```

		##### Using the `as` prop

		This allows for TypeScript intellisense to infer props based on the `as` prop.

		```tsx
		import classed from "tw-classed";

		const Button = classed("button", "bg-blue-500 text-white p-4 rounded-md");

		const MyApp = () => {
		return (
		<Button as="a" href="https://example.com" target="_blank">
		click me
		</Button>
		);
		};
		```

		## Coverage

		-----------\|---------\|----------\|---------\|---------\|-------------------
		File \| % Stmts \| % Branch \| % Funcs \| % Lines \| Uncovered Line #s
		-----------\|---------\|----------\|---------\|---------\|-------------------
		All files \| 100 \| 100 \| 100 \| 100 \|
		index.tsx \| 100 \| 100 \| 100 \| 100 \|
		parser.ts \| 100 \| 100 \| 100 \| 100 \|
		-----------\|---------\|----------\|---------\|---------\|-------------------

		## Contributing
		@@ -134,6 +40,1 @@
		> This is still under development, and the API is subject to change. Thanks for your patience.

		Upcoming

		- [ ] compoundVariants support
		- [ ] TS Support for `as={ComponentFn}` prop (currently only `keyof JSX.InstrinsicElements`)

@tw-classed/core - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics