# jsx-classname-shorthand

> jsx runtime wrapper utilizes a shorthand alias for className props.

Latest version **0.0.8** (published 2023-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsx-classname-shorthand
pnpm add jsx-classname-shorthand
yarn add jsx-classname-shorthand
bun add jsx-classname-shorthand
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2023-07-19 |
| First published | 2023-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yahiro |
| Maintainers | yahiro07 |
| Keywords | react, jsx, classname |

## Links

- npm: https://www.npmjs.com/package/jsx-classname-shorthand
- Repository: https://github.com/yahiro07/jsx-classname-shorthand
- Homepage: https://github.com/yahiro07/jsx-classname-shorthand#readme
- Issues: https://github.com/yahiro07/jsx-classname-shorthand/issues
- npm.io page: https://npm.io/package/jsx-classname-shorthand

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.8 (latest) — 2023-07-19
- 0.0.7 — 2023-06-24
- 0.0.6 — 2023-06-24
- 0.0.5 — 2023-06-24
- 0.0.4 — 2023-06-24
- 0.0.3 — 2023-06-24
- 0.0.2 — 2023-06-24
- 0.0.1 — 2023-06-24

## README

# jsx-classname-shorthand

Make jsx accepts `q` props as a shorthand alias for `className`.

I usually give class names to elements for styling, but since the prop `className` is a long word for how often it is used. I therefore created a wrapper for the jsx runtime that allows `className` to be written in short props called `q`.

This library is assumed to be used in conjunction with React.

## install

```
npm install jsx-classname-shorthand
```

## configuration

tsconfig.json
```json
{
  "compilerOptions": {
    ...,
    "jsx": "react-jsx",
    "jsxImportSource": "jsx-classname-shorthand",
  }
}
```
Specify `jsx-classname-shorthand` for `jsxImportSource`.

## code example

Say there is a jsx code with `className` as follows
```tsx
  <div className="article-card">
    <div className="header-row">
      <div className="icon">{article.authorIconText}</div>
      <div className="name">{article.authorName}</div>
    </div>
    <div className="content-row">{article.contentText}</div>
  </div>
```

Now it can be written this way using `q` props
```tsx
  <div q="article-card">
    <div q="header-row">
      <div q="icon">{article.authorIconText}</div>
      <div q="name">{article.authorName}</div>
    </div>
    <div q="content-row">{article.contentText}</div>
  </div>
```

There is a working code at
[examples/timeline-ui](https://github.com/yahiro07/jsx-classname-shorthand/blob/main/examples/timeline-ui/src/App.tsx)


## multiple classnames

```tsx
  <div q={["foo", "bar", "buzz"]} />
```
Props `q` accepts an array of classname values


## if props
There is `if` props added for conditional rendering. It is similar to `ngIf` in angular or `v-if` in vue.
```tsx
  <div if={someCondition}>hello</div>
```
it results equivalent to
```tsx
  {someCondition && <div>hello</div> }
```

Happy Coding!!

## License
MIT

---
_Source: https://npm.io/package/jsx-classname-shorthand · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._