Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
React JS Articles
Page 3 of 17
How to autocomplete in ComboBox input in Material UI?
Autocomplete functionality within ComboBox inputs has become a widely favored feature due to its ability to enhance the user experience by offering suggested options while typing. Material−UI, a renowned React UI framework, presents an elegant and straightforward solution for implementing autocompletion in ComboBox inputs. In this article, we'll explore the step−by−step process of setting up and utilizing the Autocomplete component in Material−UI, all while maintaining a desirable level of perplexity and burstiness. What is ComboBox Autocomplete? Autocomplete in a combo box entails enhancing a normal text input with a panel of suggested options. This feature proves useful in two main ...
Read MoreHow to add labels in the checkbox in Material UI?
A key component of user interfaces, checkboxes make it simple for users to select options or express preferences. Sometimes, the users get to see multiple options to select from, and if there are no proper labels, they may get confused. To solve this issue, checkboxes can be easily and elegantly added to the applications using Material UI, a well−liked React component library. Although checkboxes in the Material UI lack labels by default, this can occasionally cause confusion among users. In this article, we are going to learn how to create loading buttons in Material UI. Before going further in the ...
Read MoreHow to add buttons with icons and labels in Material UI?
If you are developing a React web application, it is likely that the icons will be used. Icons represent the concept, idea, file, program, application, business, and so on. To define the identity of a feature, you can use icons. An appropriate icon can stand in for a program or application when you do not want to write out its name, so that it is easy to identify. Icons are available in Material UI for use in our applications when building. Icons can also be added with buttons in the Material UI. Now, we’ll be learning how to add buttons ...
Read MoreA Guide To Server-Side Rendering In React
Server−side rendering has been around for a while now. It was first introduced in the early 2000s and has been used by many websites since then. The idea behind this technique is to pre−render HTML pages on a server and send them back to the client's browser as they request them. With server-side rendering (SSR), the page is rendered on the server. This ensures that the page is available to users even before it loads on their browser. We’ll get to know more about SSR in this article − How Server-side Rendering (SSR) Works? It is the process of rendering ...
Read MoreHow to create Calendar in ReactJS?
In some web applications, we require the user to take a date input. For example, we need to take the user's birth date or any other particular date as input. In such cases, it is a good idea to show the calendar to users and ask them to select the date rather than taking the date input as a string, as users can make mistakes in entering the string. In this tutorial, we will learn to add the calendar component using the built-in react js libraries or create a calendar component from scratch. Using the React-calendar Library to Create ...
Read MoreMovie Web Application with ReactJS
Nowadays, OTT platforms are becoming more popular, and people are buying subscriptions to various OTT platforms to watch movies, TV shows, or services. Maybe, you can also start any OTT application. In this tutorial, we will learn to create a movie web application using React JS. However, We will learn to write only the basic code of movie applications. If users want, they can start with the below code and make improvements to create an advanced version of the movie web application. Users should follow the steps below to start with the movie web application. Step 1 − In ...
Read MoreUsing The Audio in Snack
Audio is a common component of mobile apps. Audio can be used in apps in many ways. Audio can be selected from the mobile, it can be used from any online link, or can be included in the project itself as local audio. Expo-av can be used in all these cases for integrating sound into mobile apps. In this article, the React native and javascript code is shown with three different examples where in the first example, an audio file is browsed from the device. In the second example, the audio is taken from an online link and mixed with ...
Read MoreUsing Cards in Snack
Sometimes, the task is to show a small bounded area with some text, picture, or colors and to retrieve more information from it later or to perform some actions on selecting that item. For this Card from react-native-paper can be used. More than one Card can also be used on a Screen, integrating it as a list item and it can be made clickable. In this article, the React native and javascript code is shown with two different examples where first a single card with an Image is used in an app, and in the second example multiple cards are ...
Read MoreUsing Tabs in Snack
Tabs are created to implement multipage views in apps. Tabs are often placed on the top or at the bottom of the screen. Some libraries permit making tabs in mobile apps. Tabs can also be made using simple components like buttons. In this article, the React native and javascript code is shown with two different examples where in the first example, the buttons are used to make tabs. In the other example, the createMaterialTopTabNavigator from '@react-navigation/material-top-tabs' is used to make tabs and then render these on the screen of the device. Algorithm 1 Step 1 − Import Text, View, StyleSheet, ...
Read MoreText to Speech Examples in Snack
Text to Speech is an important area where the written language text is converted into speech form. For using Text to Speech conversion, functionality from expo-speech can be used. In this article, the React native and javascript code is shown with two different examples, where in the first example while showing the text-to-speech conversion, the pitch and speed change are shown along with the original conversion. In the second example, the pause, resume, and stop methods are demonstrated and the user can also enter the text at the time of conversion. Algorithm-1 Step 1 − Import Text, View, StyleSheet, and ...
Read More