Search

Nalezeno "hooks": 39

A Dark Mode Toggle with React and ThemeProvider

25.9.2019
I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including YouTube and Twitter, have implemented it already, and we’re starting to see it trickle onto many other sites as well. In this tutorial, we’re...

Thinking in React Hooks

25.9.2019
Amelia Wattenberger has written this wonderful and interactive piece about React Hooks and details how they can clean up code and remove all those troubling lifecycle events: React introduced hooks one year ago, and they've been a game-changer for a lot of developers. There are tons of how-to...

Hamburger Menu with a Side of React Hooks and Styled Components

10.9.2019
We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off screen, particularly on mobile where every pixel of space counts. CSS-Tricks is all about double...

Using requestAnimationFrame with React Hooks

21.8.2019
Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR: Pass an empty array as a second parameter...

Run useEffect Only Once

30.7.2019
React has a built-in hook called useEffect. Hooks are used in function components. The Class component comparison to useEffect are the methods componentDidMount, componentDidUpdate, and componentWillUnmount. useEffect will run when the component renders, which might be more times than you think....

Build a Chat App Using React Hooks in 100 Lines of Code

15.7.2019
We’ve looked at React Hooks before, around here at CSS-Tricks. I have an article that introduces them as well that illustrates how to use them to create components through functions. Both articles are good high-level overviews about the way they work, but they open up a lot of possibilities...

Haunted: Hooks for Web Components

3.7.2019
I was just chatting with Dave and he told me about Haunted. It's hooks, but for native web components! Pretty cool. I think the existence of stuff like this makes using web components more and more palatable — particularly in that totally-native no-build-step-needed-at-all kinda way. I...

Getting to Know the useReducer React Hook

26.6.2019
useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. Here is an example of how it is used; const [state, dispatch] = useReducer(reducer...

Getting to Know the useReducer React Hook

26.6.2019
useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. Here is an example of how it is used; const [state, dispatch] = useReducer(reducer...

Managing State in React using Unstated-Next

17.6.2019
In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API. Well, we’re going to build off that last post by looking...

Create a Custom useFetch() React Hook

5.6.2019
A custom hook is a JavaScript function with a unique naming convention that requires - the function name to start with use and the function may call other Hooks

Creating Animations Using React Spring

4.6.2019
Have you ever needed animation in your React application? Traditionally, implementing animation has not an easy feat to accomplish. But now, thanks to Paul Henschel, we there’s a new React tool just for that. react-spring inherits from animated and react-motion for interpolations, optimized...

What Hooks Mean for Vue

4.2.2019
Not to be confused with Lifecycle Hooks, Hooks were introduced in React in v16.7.0-alpha, and a proof of concept was released for Vue a few days after. Even though it was proposed by React, it’s actually an important composition mechanism that has benefits across JavaScript framework ecosystems,...

Intro to React Hooks

18.1.2019
Hooks make it possible to organize logic in components, making them tiny and reusable without writing a class. In a sense, they’re React’s way of leaning into functions because, before them, we’d have to write them in a component and, while components have proven to be powerful and functional...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace