Comments (6)
This is great advice. I am totally guilty of that button use case. Gonna go change that right now to variant
instead! Thanks!!
from blog-comments.
Very nice article. It inspired me to rethink table components in react as I've often come across table with an isLoading
prop.
Thanks to your article, I now prefer:
<PostsTable
posts={data}
setFilters={setFilters}
columns={columns}
status={tableStatus}
/>
import {FancyTableHeaders} from "./headers";
interface FancyTableProps {
status: "success" | "empty" | "error" | "loading" | "idle";
}
function FancyTable ({status}: FancyTableProps) {
return (
<table>
<FancyTableHeaders
variant={status === "success" ? "enabled" : "disabled"}
/>
<tbody>
{/* ✅ little extra boilerplate */}
{/* ✅ clear conditional rendering */}
{
{
success: <PostsTableBody rows={rows} prepareRow={prepareRow} />,
empty: <EmptyTableBody />,
error: <ErrorTableBody />,
loading: <LoadingTableBody />,
idle: <IdleTableBody />
}[status]
}
</tbody>
</table>
);
}
from blog-comments.
@eusousalvi yes, that's another way, and it nicely ties together types (keyof typeof variants
) and the implementation. This works best if you can actually derive the type from there, which might not work if the types are defined somewhere else (in a contract or so). Then, you have to make sure that variants
conforms to that, but the differences are really minor :)
from blog-comments.
Thank you so much for this article. I had a lot of "oh" moments as i read the article. Very insightful
from blog-comments.
I couldn't find the edit comment option, so:
from blog-comments.
Really nice article! The only change I would do is change this switch to a object, but it's only a opinion. I think is more readable and clean:
const variants = {
percent: (value: number): string => `${value}%`,
currency: (value: number): string => `ur method - R$${value}` ,
standard: (value: number): string => String(value)
}
function formatMetric(
value: number,
variant: keyof typeof variants = 'standard'
): string {
return variants[variant](value);
}
What do you think?
from blog-comments.
Related Issues (20)
- blog/testing-react-query HOT 65
- blog/react-query-and-type-script HOT 25
- blog/using-web-sockets-with-react-query HOT 5
- blog/effective-react-query-keys HOT 28
- blog/about-async-functions HOT 5
- blog/placeholder-and-initial-data-in-react-query HOT 1
- blog/react-query-as-a-state-manager HOT 24
- blog/react-query-error-handling HOT 39
- blog/use-state-vs-use-reducer HOT 5
- blog/mastering-mutations-in-react-query HOT 43
- blog/leveraging-the-query-function-context HOT 12
- blog/beware-the-leaking-any
- blog/2021-in-review HOT 7
- blog/road-to-refactoring HOT 1
- blog/always-provide-customer-value
- blog/offline-react-query HOT 1
- blog/optional-vs-undefined HOT 1
- blog/use-urgency
- blog/react-query-and-forms HOT 16
- blog/react-query-and-forms HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog-comments.