Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dimaslz/react-dynamic-classname
React component to have a flexible className as Vue style but in React.
https://github.com/dimaslz/react-dynamic-classname
component library react
Last synced: 5 days ago
JSON representation
React component to have a flexible className as Vue style but in React.
- Host: GitHub
- URL: https://github.com/dimaslz/react-dynamic-classname
- Owner: dimaslz
- Created: 2022-01-24T00:45:38.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-15T10:11:07.000Z (about 1 year ago)
- Last Synced: 2024-02-15T14:07:31.369Z (11 months ago)
- Topics: component, library, react
- Language: TypeScript
- Homepage: https://react-dynamic-classname.dimaslz.dev
- Size: 389 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @dimaslz/react-dynamic-classname
React component to have a flexible className as Vue style but in React.
## Motivation
I like to create tools and small libraries and, this was an excuse to create a library in React. Other motivatin is, under my experience, as I have worked with Vue with dynamic classes, has a better flexibility to work with directly in the template and, it is something that I do when I work in React and I have to apply some conditionals in the `className`.
To clarify: I do saying that is better, just is a different way. For me sometimes it is useful.
## Installation
npm: `npm install @dimaslz/react-dynamic-classname`
yarn: `yarn add @dimaslz/react-dynamic-classname`
## Example
### Pure React
```tsx
// ...
export const App = () => {
return (
Demo text
)
}
export default App
```
```html
Demo text
```
### With this component
```tsx
import { ReactDynamicClass } from '@dimaslz/react-dynamic-classname';
export const App = () => {
return (
// ...
Demo text
// ...
)
}
export default App
```
```html
Demo text
```
Live demo: [https://react-dynamic-classname.dimaslz.dev](https://react-dynamic-classname.dimaslz.dev)
## Author
```js
{
name: "Dimas López",
role: "FullStack Software development",
alias: "dimaslz",
twitter: "https://twitter.com/dimaslz",
site: "https://dimaslz.dev",
linkedin: "https://www.linkedin.com/in/dimaslopezzurita"
}
```
## My other projects
- https://randomdata.loremapi.io: API mock data (no open source)
- https://icon-lib-builder.dimaslz.dev: SVG to Framework component (open source soon)
- https://ng-v-class.dimaslz.dev: Use dynamic class in Angular as Vue (open source)
- https://ng-heroicons.dimaslz.dev: Use Heroicons.com in you Angular projects (open source)