cva | react-18 | |
---|---|---|
16 | 139 | |
5,239 | 5,173 | |
- | 0.0% | |
7.2 | 0.0 | |
12 days ago | almost 3 years ago | |
TypeScript | ||
Apache License 2.0 | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
cva
-
Use postcss-cva to generate cva method
cva.style
-
Tailwind vs. Semantic CSS
* use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css
- 5 React Libraries to Level Up your Projects in 2023
-
How do you design Button in React js?
Highly recommended with this: https://github.com/joe-bell/cva
-
What am I missing out about Tailwind?
Yes, and a library like https://github.com/joe-bell/cva makes this a breeze. See https://cva.style/docs/getting-started#your-first-component for an example
-
Building a prop-based, type-safe Tailwind with vanilla-extract
There is also class variance authoriy
- Konsta UI – Mobile UI Components Built with TailwindCSS
- which way do you prefer for styling ?
-
Conditional styling reusable components
https://github.com/joe-bell/cva is great for this
-
Introducing DecaUI
Also have you heard of class variance authority? https://github.com/joe-bell/cva; personally looked into stitches & vanilla-extract but i'm preferring the simplicity of this package the most.
react-18
-
Simulate global state tradeoffs in React concurrent mode
If you aren't sure why state tearing was a hot topic a few years ago, when React's concurrent mode was first discussed, this github discussion should help: https://github.com/reactwg/react-18/discussions/69.
Tanner Linsley had a great post on twitter that suggested that concurrent rendering was fundamentally at odds with fine-grained reactivity, so to better understand what he was talking about I decided to write this demo.
- A modest request: How do you fetch data in React 18+ WITHOUT a third party dependency?
-
The Sisyphean Quest for Web Performance
Image Source: https://github.com/reactwg/react-18/discussions/37
-
useAsyncState in react, no more unnecessary useEffects.
But it does since React 18.
-
Function props
See this post for more details and an example of an actual memory leak.
-
ELI5, why is ReactDOM.createRoot an improvement over ReactDOM.render?
From the React WG:
- I know my component is re-rendering because a console.log I put in the component is logging in the console. However when I use the inspector to see why it re-rendered, its saying that it didnt re-render. How is this possible?
- Timeout in event handler
-
The current state of CSS-in-JS + React
The React working group is officially advising against using runtime CSS-in-JS.
- Warning abt setting state of unmounted component
What are some alternatives?
react-cva - Class Variance Authority helper for react
Preact - ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
eslint-plugin-tailwindcss - ESLint plugin for Tailwind CSS usage
htmx - </> htmx - high power tools for HTML
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
petite-vue - 6kb subset of Vue optimized for progressive enhancement
tailwindcss-classnames - Functional typed classnames for TailwindCSS
react-query - 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
stylemapper - Flexible utility to create styled and type-safe React components
React - The library for web and native user interfaces.
konsta - Mobile UI components made with Tailwind CSS
zustand - 🐻 Bear necessities for state management in React