# React Component A React component is a reusable UI element implemented as a JavaScript function that can contain markup. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Creating Query Components with Apollo DevFeed: [Creating Query Components with Apollo]() Original publisher: [Read original article]() Author: Khan Academy Published: 2017-06-12T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [GraphQL](), [React](), [React Component](), [API]() Tags: [apollo](), [engineering](), [examples](), [flow](), [graphql](), [how-to](), [news](), [react](), [react-component](), [web-frontend]() ### AI overview This tutorial explains a Query Components pattern for React applications using Apollo and GraphQL. The pattern separates data definitions from presentational components, allowing the presentational layer to remain independent of Apollo and GraphQL. Examples cover filtering by postal code, loading and error states, empty results, and Flow types. ### Source excerpt By Brian Genisio Here at Khan Academy, we've been using GraphQL in several projects with great success. GraphQL ... Read more ## Bridging two JSX runtimes: How we solved Astro's React children problem DevFeed: [Bridging two JSX runtimes: How we solved Astro's React children problem]() Original publisher: [Read original article]() Author: Kyle Finken Published: 2026-03-10T00:00:00Z Content type: article Language: en Sources: [Mintlify Blog]() Topics: [Astro](), [React](), [MDX](), [React Component](), [render]() Tags: [astro](), [bridging](), [component](), [components](), [engineering](), [mdx](), [react](), [render](), [solved]() ### AI overview Mintlify describes how its Astro integration addressed a JSX runtime mismatch that caused compound React components to lose their children during hydration in Astro's MDX pipeline. ### Source excerpt How Mintlify solved a fundamental JSX runtime mismatch to make compound React components work inside Astro's MDX pipeline. ## RSC for Astro Developers DevFeed: [RSC for Astro Developers]() Original publisher: [Read original article]() Published: 2025-05-06T00:00:00Z Content type: tutorial Language: en Sources: [Dan Abramov]() Topics: [Astro](), [React](), [React Component](), [JavaScript](), [Web Development]() Tags: [astro](), [frontend](), [javascript](), [react](), [react-component]() ### AI overview This tutorial compares Astro's server-rendered Astro Components and interactive Client Islands with React Server Components and Client Components. It explains their similar mental models and highlights differences in syntax, file structure, props, templates, and the use of directives to separate server and client code. ### Source excerpt Islands, but make it fractal. ## JSX Over The Wire DevFeed: [JSX Over The Wire]() Original publisher: [Read original article]() Published: 2025-04-16T00:00:00Z Content type: article Language: en Sources: [Dan Abramov]() Topics: [React](), [API](), [React Component](), [Database]() Tags: [api](), [database](), [react](), [react-component](), [ui](), [viewmodel]() ### AI overview The article explores an inside-out approach in which an API returns React components or JSX rather than only JSON data. It then examines the difference between raw Models stored in databases and personalized, aggregated ViewModels consumed by a UI. ### Source excerpt Turning your API inside-out. ## Announcing New Keycloak UI Component Libraries! DevFeed: [Announcing New Keycloak UI Component Libraries!]() Original publisher: [Read original article]() Author: Erik Jan de Wit Published: 2024-09-04T00:00:00Z Content type: release Language: en Sources: [Keycloak Blog]() Topics: [Keycloak](), [React](), [React Component](), [releases](), [npm packages](), [Development]() Tags: [design-system](), [development](), [idm](), [kerberos](), [keycloak](), [ldap](), [libraries](), [npm](), [openid-connect](), [react](), [react-component](), [release](), [saml](), [sso]() ### AI overview Keycloak announces new React component libraries built on PatternFly for creating account and admin consoles. The article also introduces the npm create keycloak-theme quickstart tool, which currently supports account consoles and is planned to support admin consoles in release 26.0.0. ### Source excerpt We're excited to announce the release of two new npm packages designed to supercharge your Keycloak customization efforts. These React component libraries, built on top of PatternFly, provide the essential building blocks for crafting Keycloak account and admin consoles. The tool generates sample code for a custom console using our "Composable UI" technique. Essentially, this means that you can build your console out of exported Keycloak components that we intend to support in future releases. The packages are: @keycloak/keycloak-admin-ui This package provides the building blocks for creating a Keycloak admin console. @keycloak/keycloak-account-ui This package provides the building blocks for creating a Keycloak account console. @keycloak/ui-shared This package provides shared components and utilities for building Keycloak UIs. Accelerate Your Development with Our Quickstart Tool Kickstart your project with our npm create keycloak-theme my-theme command. This streamlined tool generates a project structure, essential dependencies, and configuration, saving you precious time. At the moment, the tool is only available for account consoles, but we are working on adding support for admin consoles. This will be available in the next release (26.0.0). Get Started: Run npm create keycloak-theme@latest my-theme. The keycloak server can be started with npm run start-keycloak Start the development server with npm run dev Customize your theme by editing files in the src directory. The keycloak server will connect to the development server and all the changes will be reflected in the browser. Just open your browser and go to http://localhost:8080/realms/master/account/personalInfo and login with admin/admin. This will open the keycloak account console. You will see that the example code has an extra page and some extra content above each page. Key Benefits: Rapid development: Create stunning UIs in less time. Consistency: Adhere to the PatternFly design system for a cohesive loo ## Catching the blur event on an element and its children DevFeed: [Catching the blur event on an element and its children]() Original publisher: [Read original article]() Author: Stanko Published: 2021-09-19T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [React Component](), [JavaScript](), [browser](), [Web Development]() Tags: [browser](), [component](), [focus](), [framework](), [javascript](), [react](), [react-component]() ### AI overview A tutorial explains how to handle blur events on a parent element with focusable children. It uses requestAnimationFrame to wait for the next focus target, then checks whether document.activeElement remains inside the parent before running blur logic such as closing a menu. ### Source excerpt Recently I implemented a fly out menu in React, and stumbled on the following problem - I had to catch a blur event on the menu, but it had multiple focusable children. When user is tabbing between these menu items, blur event is triggered every time on the parent, followed by the focus event on the next item. As I wanted to close the menu on blur, this would close it before user was able to get to the next menu item. Solution is fairly simple and it is not React exclusive - it can be used with any other framework or vanilla JavaScript. The flow goes something like this: Listen to a blur event on the parent element (in my case it was the menu). This will catch blur event on all of its children too. In the handler, give browser time to focus the next element (by using requestAnimationFrame). Check if the newly focused element is in our parent element. If it is, do nothing, as focus hasn't exited the parent yet. If it is not, we left the parent element completely and it is safe to do our blur logic (in my case, it was closing the menu). Code looks like this: const handleBlur = (e) => { const currentTarget = e.currentTarget; // Give browser time to focus the next element requestAnimationFrame(() => { // Check if the new focused element is a child of the original container if (!currentTarget.contains(document.activeElement)) { // Do blur logic here! } }); }; React component # I pulled out the logic and created a small React component: const ChildrenBlur = ({ children, onBlur, ...props }) => { const handleBlur = useCallback( (e) => { const currentTarget = e.currentTarget; // Give browser time to focus the next element requestAnimationFrame(() => { // Check if the new focused element is a child of the original container if (!currentTarget.contains(document.activeElement)) { onBlur(); } }); }, [onBlur] ); return (
{children}
); }; and usage is pretty straight forward: { doSomethingCoolOnBlur() }} > ) Original publisher: [Read original article]() Published: 2021-05-04T00:00:00Z Content type: opinion Language: en Sources: [Radek Pazdera]() Topics: [Code](), [implementation](), [React Component](), [Figma](), [interface](), [Requirements]() Tags: [code](), [component](), [figma](), [implementation](), [interface](), [react-component](), [requirements](), [ui]() ### AI overview A developer describes how changing a button's position in a Figma design forced a major restructuring of a React save dialog. The experience shows that changes in requirements or UI designs can have non-linear effects on implementation. ### Source excerpt And how long will it take? ## New Account Console DevFeed: [New Account Console]() Original publisher: [Read original article]() Author: Stan Silvert Published: 2020-09-04T00:00:00Z Content type: release Language: en Sources: [Keycloak Blog]() Topics: [Keycloak](), [React](), [React Component](), [CSS]() Tags: [css](), [idm](), [kerberos](), [keycloak](), [ldap](), [openid-connect](), [react](), [react-component](), [saml](), [sso](), [themes]() ### AI overview Keycloak announces its new Account Console as the default, replacing the old console for most users. Built with React and PatternFly 4, it supports custom themes, custom pages, and pluggable React components. ### Source excerpt The Keycloak team is excited that our new Account Console is finally final! The old account console is still available for those who need it, but the new version is the default from now on. This new console is written as a Single Page Application with React and PatternFly 4. In addition to the modern look and feel, we make it really easy for organizations to personalize the console with custom themes and even custom pages that can have unlimited functionality. Screen shots of New Account Management Console Theming PatternFly 4 makes it really easy to theme the new account console using its system of CSS variables. All you have to do is tweak a few variables, add your own logo, and the console is perfectly skinned. body { --pf-global--FontFamily--sans-serif: Comic Sans MS; --pf-global--FontFamily--heading--sans-serif: Comic Sans MS; --pf-global--BackgroundColor--dark-100: #2B9AF3; --pf-global--Color--100: #004080; } Create your own sub-pages You may have noticed the "Keycloak Man" section above. The new console includes one of our most requested features. That is the ability to add and remove sub-pages. So we've made it very easy to develop and plug in your own React component and add it to the Account Console. It's even possible to build new pages with nothing but an editor. No build step is required unless you want to use more advanced tools like JSX and Typescript. Of course, this "Keycloak Man" theme is available online as a Keycloak Quick Start so you can check out all the source. The Home for New Keycloak Features New Account Console is the home for user configuration of new Keycloak features like WebAuthn support. So look for new features to start showing up in the New Account Console instead of the old one. ## React Router v4 redirect decorator DevFeed: [React Router v4 redirect decorator]() Original publisher: [Read original article]() Author: Stanko Published: 2018-01-29T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React Router](), [React Component](), [Code]() Tags: [code](), [component](), [export](), [import](), [react](), [react-component](), [react-router](), [return](), [router](), [routing]() ### AI overview This tutorial explains how React Router v4 handles redirects through rendered components and presents a higher-order decorator that exposes a redirectTo method. The decorator can either replace the current URL or push a new history entry. ### Source excerpt React Router switched to component based routing starting with the version 4. Redirects are now done by rendering a Redirect component, like this:Please note that you can use included withRouter decorator but it can cause update blocking and introduce side effects. This is small subset of it. What I usually do is to keep redirectTo property in component's state. To redirect, I set it to the URL I want to redirect to, and render Redirect at the start of the render method: render() { const { redirectTo } = this.state; if (redirectTo) { return ; } return ( ); } This approach works well, but I got tired of repeating the same code over and over again. So I pulled the functionality to a decorator (higher order component if you prefer). Redirect decorator # I did exactly what I described above, and exposed redirectTo method to a composed component. import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; const withRedirect = ComposedComponent => class RedirectDecorator extends Component { state = { push: false, redirectUrl: null, } componentDidUpdate(prevProps, prevState) { const { redirectUrl, } = this.state; // If component is rendered on redirect page as well // (i.e. header or footer) it would cause redirect-loop // as "" is being rendered every time. // So we are resetting the state after redirect if (!prevState.redirectUrl && redirectUrl) { this.setState({ push: false, redirectUrl: null, }); } } redirectTo = (redirectUrl, push = false) => { this.setState({ push, redirectUrl, }); } render() { const { push, redirectUrl, } = this.state; if (redirectUrl) { return ; } return ( ); } }; export default withRedirect; Usage # Import newly added decorator and apply it to your component. It will inject redirectTo to it's props, and ## React ratio DevFeed: [React ratio]() Original publisher: [Read original article]() Author: Stanko Published: 2018-01-23T00:00:00Z Content type: release Language: en Sources: [Stanko Tadić]() Topics: [React](), [React Component]() Tags: [demo](), [react](), [react-component](), [release]() ### AI overview The author presents react-ratio, a small React component that creates an element with a specified aspect ratio. The article points readers to a demo and the source code. ### Source excerpt Short one today. I'm continuing to release small libraries. So let me present react-ratio, another small React component. You probably guessed what it does - creates element with the given aspect ratio. Check the demo or grab the source code ## Apollo Tote, Declarative Patterns and a Sneak Peek into Apollo 2.0 DevFeed: [Apollo Tote, Declarative Patterns and a Sneak Peek into Apollo 2.0]() Original publisher: [Read original article]() Author: Peter Piekarczyk Published: 2017-10-10T23:51:00Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [React](), [React Component](), [Library](), [Expo](), [Redux]() Tags: [authentication](), [authorization](), [community](), [guest-post](), [react](), [react-component](), [react-native](), [redux](), [render]() ### AI overview This guest post introduces Apollo Tote, a declarative React component and helper library for Apollo queries. It explains how to use render props and JSX to handle query data, loading and error states, with examples including authentication and authorization flows. ### Source excerpt This is a guest post from Peter Piekarczyk, technical co-founder and Apollo / React Native guru at Orchard.ai. Apollo Tote is a declarative React component. Take what you've been doing inside your "smart" containers and apply it with JSX! It's meant to be a simple helper library for your Apollo queries until declarative components are released in Apollo 2. I created this because I don't believe separate components and containers need to be applied everywhere. ## Plx - React parallax component DevFeed: [Plx - React parallax component]() Original publisher: [Read original article]() Author: Stanko Published: 2017-07-24T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [React Component](), [Optimization](), [Code](), [Development]() Tags: [code](), [open-source](), [optimization](), [performance](), [react](), [react-component]() ### AI overview This article introduces Plx, an open-source React component for creating parallax effects driven by scroll position. It explains the component's scroll manager, viewport-based animation behavior, and performance optimizations. ### Source excerpt I'm becoming predictable. Again, I haven't found component I like, so I wrote my own. This time, I've build React component for parallax (on scroll) effects. Check the live demo. It is called Plx, it is open source and available on GitHub and npm. What it does # So far in my career, I've built so many parallax components. Parallax is actually wrong termthe effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g. through the viewfinder and the lens of a camera. here, but it got accepted by development community. Designers love them and users are fascinated by fancy effects. Simply explained as you scroll the page down something is changed relative to the scroll position. For example, as you scroll you can make things explode! Just check the demo. There is a lot of solutions out there, but IMHO they are usually bloated or not performant or complicated to use. And as I'm using React a lot, I decided to collect what I have learned about implementing on scroll effects in React and create standalone component. Most of the code in this component is pulled out from my existing projects and glued together. Performance # Plx is really performant, thanks to a few optimizations. First and the most important one - it is not listening to window scroll event. It is using simple scroll manager, which checks if scroll has changed every 16ms (to get smooth 60fps). When scroll changes it broadcasts custom event. All of the Plx components are listening to this event and share the same scroll manager (it is singleton). Singleton is created with the first component, and destroyed when last one unmounts. Another optimization is that elements are not animated when not in viewport. Actually, they are not animated if they are more than 50px outside of viewport. So component "gets ready" 50px before it enters the viewport. You can force animating element even outside of viewport by setting animateWhenNotInViewport prop to true. Beside ## React scroll decorator DevFeed: [React scroll decorator]() Original publisher: [Read original article]() Author: Stanko Published: 2017-05-17T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [React Component](), [JavaScript]() Tags: [javascript](), [lifecycle](), [performance](), [react](), [react-component]() ### AI overview A tutorial presents a React scroll-position decorator that injects scroll position into component props. It uses a timed interval to throttle requestAnimationFrame checks instead of directly handling scroll events, while warning that applying it to many components may cause performance issues. ### Source excerpt Update, December 2017 # Check this post for updated, more performant version. I love JavaScript decorators. One that I copy to every React project is scroll decorator. It is fairly simple way of injecting scroll position to react components. This way you can handle scroll using react lifecycle. This decorator is not listening to a scroll event, as that is the performance killer (especially when you push it to react lifecycle). Instead, it is using interval to check if scroll position has changed. To keep it performant, I'm using requestAnimationFrame. Interval is only there to throttle animation frame from triggering too often. Please note that it still may cause performance issues if you apply it to a large number of components. Personally, I never had to apply it to a more than three of four per page. So here it is: import React, { Component } from 'react'; const withScroll = ComposedComponent => class ScrollDecorator extends Component { constructor() { super(); // Initial scroll position this.state = { scrollPosition: this.getWindowScrollTop(), }; // Bind handlers this.handleInterval = this.handleInterval.bind(this); this.handleRequestAnimationFrame = this.handleRequestAnimationFrame.bind(this); } componentWillMount() { // 50 times per second, change to your needs const INTERVAL = 20; this.intervalID = setInterval(this.handleInterval, INTERVAL); } componentWillUnmount() { // Remove and reset interval/animationFrame clearInterval(this.intervalID); cancelAnimationFrame(this.requestID); this.requestID = null; this.intervalID = null; } getWindowScrollTop() { // Get scroll position, with IE fallback return window.pageYOffset || document.documentElement.scrollTop; } handleInterval() { // Interval is only used to throttle animation frame cancelAnimationFrame(this.requestID); this.requestID = requestAnimationFrame(this.handleRequestAnimationFrame); } handleRequestAnimationFrame() { const { scrollPosition } = this.state; const newScrollPosition = this.getWindowScrollTop() ## React animate height (slide up/down) component DevFeed: [React animate height (slide up/down) component]() Original publisher: [Read original article]() Author: Stanko Published: 2017-03-06T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React](), [React Component](), [how to create smooth CSS transitions](), [CSS](), [JavaScript]() Tags: [component](), [css](), [github](), [javascript](), [npm](), [react]() ### AI overview This tutorial presents a small React component for animating height between collapsed, expanded, and specific pixel values. It explains how the component uses CSS transitions by temporarily replacing auto with numeric heights, then restores the appropriate height and overflow values after the transition. ### Source excerpt Most JavaScript developers used jQuery's .slideUp() and .slideDown() methods, and got used to them. As component based frameworks usually do not include such functionality, the first logic choice is to turn to CSS. But alas, CSS transitions do not work with height: auto. (Transitions can do a tween only between two numeric values.) As we use this a lot in our company, I tried to find React component that does it. Found a couple, didn't like them, as most of them rely on a tone of dependencies. Again, I decided to write my own - small, fast and with no dependencies. Demo # You can see it live here. Same page has the documentation and links to the npm and GitHub. Component can animate from (and to) 0 (collapsed), auto (expanded), and to any specific value in pixels. Usage # Install it from npm npm install --save react-animate-height Import it in your React project, and wrap the content you want to animate in it. import AnimateHeight from 'react-animate-height';

Your content goes here

Put as many React or HTML components here.

 For more detailed documentation and all props explained, check the GitHub repo, How it works # Component is using CSS transitions, but with a small trick to make it work. We mentioned that transitions only work between two numeric values. We'll replace auto with numeric value just before transition happens. There are three possible cases: Specific height to the other specific height This is the easiest one. Element will have overflow: hidden and translate from one height value to the other. Piece of cake. Specific height (0 included) to auto This one is a bit more interesting. As we can't transition to auto, component will take the content height, apply it to the element, and transition will happen. But important thing is that after the transition is complete, component will reset height to auto and overflow to visible This is important if you add more content to