React

Hello Friends 👋, Welcome To Infinitbility! ❤️ This tutorial will help you to solve your recorded video seekable issue, and also how we create seekable recorded video using RecordRTC and ts-ebml. If you are using RecordRTC for screen recording and geting issue seek bar when you play recorded video. Let’s solve this issue. ts-ebml ( https://www.npmjs.com/package/ts-ebml ) help to RecordRTC recorded make video seekable. let’s install it npm install ts-ebml --save below code is help you to make Seekable Blob, add in your code....

Hello Friends, Welcome To Infinitbility! Introduction Sometimes, we need browser details like browser name, version, os, and etc to store on our database and write code based on browser details. today you will get how to get browser or device detail in react. For get browser details, we are going to use Platform.js ( https://github.com/bestiejs/platform.js ) and check examples to get browser detail like name, version, and os. Let’s start today topic How to get browser details in react programmatically...

Hello Friends, Welcome To Infinitbility! This article based on export excel in React, here you will get example of how to export excel in react. We are going to use react-data-export library to manage export excel task. Many dev’s install and stuck on react-export-excel package. Please don’t waste time in this package it just forked of react-data-export there are no support option. Let’s start today article How to export excel in react...

Hello Friends, Welcome To Infinitbility! This article based on how to download any file in react, when you are working any type of project there are one definitely feature is download report. May be you are looking for excel ( xslx, and csv ), pdf, video ( mp4, mov, and avi ), image (png, jpg, and jpeg ) and etc but in this article we will learn to download any type file in react....

Hello Friends, Welcome To Infinitbility! This article will help you to know when user view full video using video-react package. Many times we want to know user watch full video or not then video-react package provide onEnded call back function. Note: this article only for those developer who are using video-react library. Let’s start today’s article How to detect video completed in video react Video React also provide subscribeToStateChange but it’s now work for me and this article alternative solution for this....

Hello Friends, Welcome To Infinitbility! This article will help you to create a functional component in react-native. Here, I will share the functional component example structure for your reference. We are clear below some basic topics in this article How to create a functional component how to create functions in functional component How to create a state in functional component How to use a functional component in class component Let’s start today topic React Native Functional Component Example...

Hello Friends, Welcome To Infinitbility! This article will help you to create datepicker year scrollable, below example based on react-datepicker package then please first verify with your project datepicker package. Default, React datepicker provide arrow to show more year but it’s not good when user want go previous 50 year then user have click 50 times to select those year. Let’s start today topic React datepicker scrollable year dropdown Here we use yearDropdownItemNumber and scrollableYearDropdown props to make year dropdown scrollable....

Hello Friends, Welcome To Infinitbility! This article will help you to create dynamic route in react like server rendering, here we are using react-router and react-router-dom to manage route in react. In this article, I will share Routes component to manage routes with routes props, every time it will create routes when props change. Let’s start today topic how to render dynamic route in React Step 1: Import Component First, we have to import all component in routes files and create object with their key, because we have to access component dynamically....

Hello Friends, Welcome To Infinitbility! This article will help you to show datepicker bottom every time when it’s open, below example based on react-datepicker package then please first verify with your project datepicker package. Sometime, react-datepicker open in window it’s half of picker then we have only one solution we have to show datepicker bottom align when it’s open. Let’s start today topic How to show bottom in react datepicker...

Hello Friends 👋, Welcome To Infinitbility! ❤️ in this article, we are use RecordRTC and MediaStream to record audio. This article provide example to add mute and unmute functionality in your react web rtc application. Let’s start today topic how to add mute and unmute functionality in mediastream react let audioTrack; await navigator.mediaDevices .getUserMedia({ audio: true }) .then((audioStream) => { let track = audioStream.getAudioTracks(); if(track.length){ audioTrack = track[0]; } let finalTrack = new MediaStream(); // audioStream....

Hello Friends, are you find steps to deploy react applications on the ubuntu server with setup guide? Then you are right page. let’s start In this article, we set up a ubuntu server with a react environment, learn the react build process, and figure out some issues like after build getting a blank page, etc. Setup Ubuntu Server Install Apache $ sudo apt-get update $ sudo apt-get install apache2 Install Vim for editing content...