A brief tutorial on how to generate a PDF from a React component . Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your application as PDF. For example, when you display charts based on data, a user should be able to export the chart as PDF. In this React tutorial, I want to show you how…
If we would be only using JavaScript, it would be possible to create a conditional React className attribute this way: Fortunately, there is one neat helper library for conditional classnames in React : clsx : It works perfectly with CSS modules too: And could also be used for optional classNames in Styled Components .
In this tutorial, I want to show you how to use React Table Library to create a Tree Table or Tree List . In the previous example, you installed React Table Library to create a table component. Now, we will enable users to expand and collapse rows in a React Tree View . First, import the useTree hook: And second, initialize it with the table…
In this tutorial, I want to show you how to use React Table Library with its useRowSelect plugin to implement a select feature. In the previous example, you installed React Table Library to create a table component. Now, we will enable users to select a row in the table by either clicking the row or clicking a checkbox. First, import the…
In this tutorial, I want to show you how to use React Table Library with double click on a row. In the previous example, you installed React Table Library to create a table component. A single click on a row is enabled in the following way: By contrast, a double click on a row can be achieved in this way: Keep in mind that enabling double click…
Can you use conditional React Hooks in React components? Technically: No. However, if you know about how React Hooks work internally, you can make conditional hooks work for you. Let's take the following example where we start without any conditional hook: In this example, we are conditionally rendering a list component . When the components…
As a freelance React developer, I work with a lot of clients on their React projects these days. Every time I get a request in my inbox, I usually reply with the same email template which I call the freelance checklist for React developers . If you are going to sign up for my Newsletter, you will get two email templates -- one from the perspective…
In this tutorial, I want to show you how to use React Table Library with a search feature. In the previous example, you installed React Table Library to create a Table component. Now, we will enable users to search data in the table. React Table Library does not come with a native search feature, however, as you have access to the data from…
In this tutorial, I want to show you how to use React Table Library with its usePagination plugin to implement pagination. In the previous example, you installed React Table Library to create a table component. Now, you will enable your users to paginate pages in a table. First, import the usePagination hook: Second, initialize it with the…
React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React (e.g. useState and useReducer ) but also for consuming React's Context . This tutorial shows you how to use React's useContext Hook . Before, make sure to read my React Context tutorial which offers answers to the following…
