Front End Development, React.js

Creating a Custom Calendar View using React Big Calendar

In the dynamic field of web development, presenting schedules and events in an intuitive and user-friendly manner stands as a pivotal requirement. Enter React Big Calendar, a highly acclaimed scheduler component library renowned for its robust solutions. Offering a plethora of customization options, interactivity, and feature-rich...

by akash.patel
Tag: react
06-Apr-2024

Node.js, React.js

Feature Flag and its implementation with Launchdarkly

What are Feature Flags? Feature flags (also known as Feature toggles, Release toggles, Feature Bits, Feature flippers, or Feature switches) are a powerful software development technique that allows you to enable or disable a functionality during runtime without changing code or requiring a redeploy. At a code level, feature flags take...

by Deepali Agarwal
Tag: react
28-Jan-2024

Front End Development, React.js

A Beginner’s Guide to Redux Toolkit Query/RTK Query

RTK Query is a set of utilities, a powerful data fetching and caching tool. It is an additional package provided by Redux Toolkit that enhances Redux by adding data fetching and caching capabilities.  Data fetching and state management are simple to incorporate in the Redux application by the smooth integration with Redux Toolkit. ...

by simranjeet.kaur1
Tag: react
17-Aug-2023

React.js

React : UseState vs UseRef

With the introduction of functional components in React, state and lifecycle management has become much simpler than it ever was using class-based components. To have the same state, useState hook has provided the most easy-to-use implementation. But do we need useState in all scenarios because each state change causes a rerender of our...

by abhinav.singh1
Tag: react
05-Apr-2023

Drupal, React.js

Loosely Coupled: Open Drupal Ajax dialog boxes from React via Drupal Behaviour

Dialogs are a quick and easy way to display additional information without reloading the entire page. Dialog boxes can display just some static text, any node or form of your page, a views page, or any custom markup you'll feed them. In order to open some link/node/page in a modal window, you can add the following structure to the link...

by Deepali Agarwal
Tag: react
03-Jan-2023

Drupal, React.js

Loosely Coupled: Pass data to React app via drupalSettings

There may be a need to pass a variable, checkbox settings, or some global settings from drupal to react. This can be achieved by passing data from drupal into an API and consuming the same API in react. But why call an extra API when we can achieve it without it? We will be using #attached/drupalSettings to accomplish this. Step 1:...

by Deepali Agarwal
Tag: react
29-Dec-2022

Drupal, React.js

Loosely Coupled: Integrate React JS into Drupal sites

React is a JavaScript library that makes it painless to create interactive UIs. Unfortunately, embedding React into a Drupal site is not straightforward. In this article, I will show you relatively simple methods of how to do so. React can be integrated with Drupal in 2 ways: Fully decoupled Partially Decoupled (Loosely...

by Deepali Agarwal
Tag: react
27-Dec-2022

Front End Development

How to fetch API data in ReactJS ?

We can fetch data by using the Javascript fetch() method. The Fetch API is a new standard to server requests with Promises, it also includes additional features. This blog will help you understand the implementation of fetch API in both functional and class components by walking through each one with sample code. Let’s start - Consider...

by Milan Chourasia
Tag: react
11-Nov-2022

Drupal

Progressively Decoupled App With React on Drupal

Decoupled Architecture To understand the term “Decoupled” we need to understand what “Coupled” is. A coupled (also known as “traditional” or “monolithic”) CMS knits together the front- and back-ends. Working off the same application, developers and content managers make adjustments to the back-end while users interact...

by shubham.joshi
Tag: react
10-Nov-2022

AngularJS, Experience Design

Optimization of AngularJS Single-Page Applications for Web Crawlers

I am assuming that you’ve seen websites developed on AngularJS. If not, here are a few sites using AngularJS you would be familiar with: Youtube Netflix Weather IStockPhoto AngularJS is taking over the robust development around the world. There’s a good reason for that React-style framework that makes better developer...

by Ankit Gupta
Tag: react
06-Jun-2017

Android, iOS

Simplistic Fullscreen Image Viewer: React Native

If you are working with the latest version of React Native like 0.35 or above, then there are lot of modules available to show an image in full screen mode. Now the twist here is when you are working with the older version of React Native. In this blog, I wanted to share how I implemented this use case on the application on React...

by Sakshi Tyagi
Tag: react
05-Jan-2017

Technology

How to use D3 with React components?

D3 (Data Driven Documents) is a JS library that helps us build visualizations. It binds arbitrary data to a DOM, where the data-driven transformations can be applied to the document. It works well by mutating the DOM element, usually a root node that was placed in the HTML. You call .append ('span') and it inserts a...

by Mansi Arora
Tag: react
07-Oct-2016