Yes, the free tier of the remove.bg API does have a limit of 50 images. To continue using it without limits, you'll need to upgrade to a paid plan. Another alternative is to look into open-source background removal tools or libraries like rembg that you can host and run locally, which might be a good option if you're comfortable setting up and managing such tools. Let me know if you'd like more info on any of these options!

Glad you liked it :)

To help them pass selected options to another page in a React app, here’s a structured response you could provide: To pass selectedOptions to another page in a Next.js app, they can use either searchParams in the URL or a global state (like context or a state management library). You can do something like - // On the first page import { useRouter } from 'next/router'; const Page1 = () => { const router = useRouter(); const [selectedOptions, setSelectedOptions] = useState([]); const handleNavigate = () => { const params = new URLSearchParams(); selectedOptions.forEach((option) => params.append("selectedOptions", option)); router.push(`/page2?${params.toString()}`); }; return ( <button onClick={handleNavigate}>Go to Next Page</button> ); }; // On the second page import { useSearchParams } from 'next/navigation'; const Page2 = () => { const searchParams = useSearchParams(); const selectedOptions = searchParams.getAll("selectedOptions"); return ( <div> <h1>Selected Options</h1> <ul> {selectedOptions.map((option) => ( <li key={option}>{option}</li> ))} </ul> </div> ); }; Please let me know if this works.

Glad it was helpful!

Nice, we can connect on insta if you like - @chitrang_sharma_

Thanks a lot 😊

The remove.bg API offers 50 free calls per month. The API key remains valid for ongoing use each month as long as you stay within the free limit. So yes its free all time, but just 50 calls per month.

@@geek_24 thanks

Thank you 😊I will try to keep the audio high from now.

Thank you so much :)

You are most welcome :)

Hahaha right, I feel you! But no worries, I’ve already switched to a Mac now 😄

Looks like some files are missing not not downloaded properly. Try to run this command - npm install react-bootstrap If this does not solves the problem then try to run these two commands - npm uninstall react-bootstrap npm install react-bootstrap To re install dependencies. If issue not resolved try to delete the node modules and package-lock.json files and run - npm install see if this resolves the issue?

I really need this

Hi, I will try to help you. Thank you for commenting.

@@geek_24 thanks 🎉

@@geek_24 sir please Thora jldi bana dy ai video generator

Kya aap bata skte hae exactly kya error return ho rahi hae API calling me? Network tab m jaake aap status code aur response send kro ek baar. ek issue jo shayad ho skta hae . const fileInput= document.getElementById('filepicker'); Yaha par aapne "filepicker" use kra hae, check kriyega k apke input type ki html m id filepicker hi ho. Otherwise ek baar aap yaha se bhi code compare kr k check kre, issue resolve ho jayega kuch ek id galat hogi. Isk alawa aapne handelUpload ko async banaya hae jo ki jruri ni hae, hm API ya toh async await laga kar call kr skte hae ya fir .then chaining krk. Apke code m dono chize saath m hae jo ki issue hae. Code Link - github.com/Geek24YT/background-remover/blob/main/index.html Agr issue resolve naa ho toh aap reply kriyega! aur ek chiz comment m kabhi bhi ese API keys share ni krni chiye, security k liye thik nahi hae.

Hey @Lvtotravel, thanks for your feedback! I completely understand your point, and it's valid to an extent. Starting with the UI first is a common approach in traditional HTML, CSS, and JS development. However, in React, we generally follow a more data-centric and declarative approach. This means setting up states and breaking down the UI into components before focusing entirely on the styling. I also want to mention that this video is targeted at intermediate users who are already familiar with React and JavaScript. If you're just starting out, I can see how some parts might be confusing. I apologize for any confusion, but I'd recommend checking out one of my beginner-friendly tutorials, like the weather app, to get more comfortable with React. Thanks again for watching and sharing your thoughts!

Hi, Check Your Webpack Configuration: Your configuration for css-loader with CSS Modules should look something like this in your webpack.config.js: __CODE__ module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, importLoaders: 1, }, }, ], }, ], }, }; __END__ test: /\.css$/ ensures that the loader applies to .css files. style-loader injects CSS into the DOM. css-loader is configured with modules: true to enable CSS Modules. importLoaders: 1 is optional but useful if you're using PostCSS or other preprocessors. Verify File Naming Convention: Ensure your CSS files follow the naming convention, such as filename.module.css, if required by your setup. Check How You're Importing CSS: Make sure you're importing the CSS in your JavaScript or React components correctly: __CODE__ import styles from './your-styles.module.css'; const Component = () => ( <div className={styles.yourClassName}> Hello World! </div> ); __END__ Inspect the Generated Class Names: Check if the class names in your HTML elements are unique (e.g., yourClassName__someHash). If they are not, CSS Modules might not be applied correctly. Debugging Tips: If it’s still not working, try clearing your browser cache. Also, make sure that there are no typos in your configuration or file paths. Let me know if this helps or if you're still facing issues!

hehe, Thanks a lot :)

To change the default served HTML file name when using webpack-dev-server and HtmlWebpackPlugin in Webpack 5, you can specify the desired HTML filename in the HtmlWebpackPlugin configuration, but also need to ensure that Webpack Dev Server serves the correct file. Here's how you can do it: Update HtmlWebpackPlugin Configuration: First, make sure that you're using HtmlWebpackPlugin correctly to change the output HTML file name. You can do this by adding the filename option to the plugin. In your webpack.config.js, it should look something like this: _______CODE START________ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // Other webpack configurations... plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'app.html', // The desired HTML filename }), ], devServer: { // Webpack Dev Server configurations... open: true, // Option to automatically open the browser historyApiFallback: { rewrites: [ { from: /./, to: '/app.html' }, ], }, }, }; ______CODE END______ Handle HTML Rewrites with devServer: The key is to tell webpack-dev-server to serve your custom HTML file. You can achieve this by using historyApiFallback inside the devServer configuration. In the above example, historyApiFallback with rewrites ensures that all requests are redirected to app.html instead of the default index.html. Run the Dev Server: After setting this up, when you run webpack-dev-server, it should serve app.html instead of the default index.html. Please let me know if this help!

@@geek_24 thank you bro. It works finally. But in the browser I don't get this html file name getting reflected. Browser still shows (index) as usual.

@@devT44 Hey, glad it worked for you! Regarding the browser still showing (index), that's expected behavior. Most browsers will display (index) as the tab title when the server serves the root URL (/), regardless of the actual HTML file name. This happens because browsers often map the root URL to an "index" file by default, even if the physical file is named differently. To update what appears in the tab title, you can explicitly set the <title> tag in your app.html file: <head> <title>Your Custom Title</title> </head> This way, you'll see your custom title in the browser tab instead of the default (index). Hope that helps! Let me know if you have any more questions.

@@geek_24 thank you

Thank you :)

Sure. Please give me some time; I will upload the video and update you soon.

Thank you so much! 😊 Sure, I'll definitely create some complex projects. Your support means a lot. Thanks again!

Hi, Without looking at the code, it will be difficult to say what might be wrong, but here are some basic things you can try. If this works, then great! 1. Adding a Scrollbar on the X-Axis To add a scrollbar on the x-axis, you need to use the scrollbar and xAxis configurations. Here is an example: xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], scrollbar: { enabled: true }, max: 5 // Display only 6 columns at a time } 2. Adding Padding Between Columns To add padding between columns, you can use the pointPadding and groupPadding properties in the plotOptions configuration. Here's an example: plotOptions: { column: { pointPadding: 0.2, groupPadding: 0.2 } } Combining both solutions, your complete chart configuration might look like this: Complete Code: Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Scrollable and Padded Columns' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], scrollbar: { enabled: true }, max: 5 // Display only 6 columns at a time }, plotOptions: { column: { pointPadding: 0.2, groupPadding: 0.2 } }, series: [{ name: 'Sales', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); I hope this helps. Let me know if this resolves the issue you are facing.

@@geek_24 { "chart": { "type": "column" }, "title": { "text": "Average Profit Margin by Product Sub Category" }, "credits": { "enabled": false }, "plotOptions": { "series": { "depth": 25, "color": "#2563EB" } }, "xAxis": { "categories": [ "Labels", "Computer Peripherals", "Storage & Organization", "Pens & Art Supplies", "Envelopes", "Office Machines", "Binders and Binder Accessories", "Telephones and Communication", "Bookcases", "Rubber Bands", "Scissors, Rulers and Trimmers", "Paper", "Chairs & Chairmats", "Appliances", "Tables", "Copiers and Fax", "Office Furnishings" ], "max": 6, "scrollbar": { "enabled": true } }, "yAxis": { "title": { "text": "Value" } }, "series": [ { "name": "Data", "data": [ 0.3778048780487805, 0.6080909090909091, 0.6653749999999999, 0.5390999999999999, 0.37529411764705883, 0.45344262295081966, 0.37373983739837396, 0.59584, 0.6569491525423728, 0.5173333333333333, 0.6431250000000001, 0.37491573033707865, 0.6470588235294118, 0.5469672131147542, 0.6903061224489796, 0.43238095238095237, 0.5181623931623932 ] } ] }

Still not getting, please guide

@@coderevision3059 What exactly is the issue you are facing? and can you share your code snippet? or repo link if possible.

@@geek_24 import React from 'react'; import Highcharts from 'highcharts'; import HighchartsReact from 'highcharts-react-official'; import HighchartsMore from 'highcharts/highcharts-more'; // Import Highcharts More if needed HighchartsMore(Highcharts); const BarChart = ({ dd:data=[], type="line", dataAnalysing, typedQuery }) => { const options = { chart: { type: 'bar', marginLeft: 150 }, title: { text: 'Most popular ideas by April 2016' }, subtitle: { text: "test" }, xAxis: { categories: [ 'Gantt chart', 'Autocalculation and plotting of trend lines', 'Allow navigator to have multiple data series', 'Implement dynamic font size', 'Multiple axis alignment control', 'Stacked area (spline etc) in irregular datetime series', 'Adapt chart height to legend height', 'Export charts in excel sheet', 'Toggle legend box', 'Venn Diagram', 'Add ability to change Rangeselector position', 'Draggable legend box', 'Sankey Diagram', 'Add Navigation bar for Y-Axis in Highcharts Stock', 'Grouped x-axis', 'ReactJS plugin', '3D surface charts', 'Draw lines over a stock chart', 'Data module for database tables', 'Draggable points' ], title: { text: null }, min: 0, max: 3, // Show only 5 bars initially scrollbar: { enabled: true }, tickLength: 0 }, yAxis: { title: { text: 'Votes', align: 'high' } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { enabled: false }, credits: { enabled: false }, series: [{ name: 'Votes', data: [1000, 575, 523, 427, 399, 309, 278, 239, 235, 203, 182, 157, 149, 144, 143, 137, 134, 118, 118, 117] }] }; return ( <div style={{ width: '600px' }}> {/* Ensure the container has enough space */} <HighchartsReact highcharts={Highcharts} options={options} /> </div> ); }; export default BarChart;

Hlo, Good Idea future m jarur m expense trancer build krunga. Btw you would like it to be a full stack NEXT app or a MERN project?

@@geek_24 abi to filhal react.js sikh rha ho

Hi there! To connect your 9 HTML files with their respective JavaScript files using Webpack, follow these steps: Create a webpack.config.js file in the root of your project and set up multiple entry points and output configuration: const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { page1: './src/page1.js', page2: './src/page2.js', page3: './src/page3.js', // Add other entries for each HTML/JS pair }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, plugins: [ new HtmlWebpackPlugin({ filename: 'page1.html', template: './src/page1.html', chunks: ['page1'], }), new HtmlWebpackPlugin({ filename: 'page2.html', template: './src/page2.html', chunks: ['page2'], }), new HtmlWebpackPlugin({ filename: 'page3.html', template: './src/page3.html', chunks: ['page3'], }), // Add other HtmlWebpackPlugin instances for each HTML file ], module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.html$/, use: [ { loader: 'html-loader', }, ], }, ], }, }; Create the Required Files: Create a src folder and place your HTML and JS files inside it. Ensure each HTML file is paired with its respective JS file as specified in the entry section. Build Your Project: After building, your files will be in the dist directory, each HTML file linked to its corresponding JavaScript file. This setup ensures everything is properly connected and bundled.

Thank you for your interest! I'll try to create tutorial on @remove-background-ai/rembg.js. If that's not possible, I'll definitely provide you with the code. Stay tuned!

Thank you :)

Glad it was helpful!

Thank you :)

😂hehe , Thank you so much! I'm flattered to be compared to Vineet Garg. By mentioning him, you took me back to my childhood-he's a legend! ❤

Thank you :)

Sure, I've shared the Insta Id on your another comment.

Hi you can send me your message on instagram - @chitrang_sharma__

Welcome 😊

Great Idea, I will make it soon Thank you. 😊

@@geek_24 thank you 😊 🙏 like voxqube or rask ia

I'm glad it helped you. :)

Thank you :)

I'm glad it helped 😊

Hi, yes, this API is free to use, but after a certain period, you need to regenerate the keys to continue using it.

Thank you so much :)

Hi there! Thank you so much for your support and for reaching out with your question. Regarding your question about why I used React-Bootstrap version 2.0 instead of the latest version, let me explain. During the creation of these videos, my aim was to demonstrate how to utilize UI kits and templates to build admin dashboards. Unfortunately, the templates I wanted to use were built using the older version of React-Bootstrap. While there may not be significant differences between the versions in terms of core functionality, I understand the importance of staying updated. If you prefer to use the latest version, I encourage you to do so! The concepts and techniques covered in the videos should still provide a solid foundation, and transitioning to the newer version shouldn't be too challenging, especially with the help of React-Bootstrap documentation. I apologize for not being able to complete the series as intended, but I hope the content provided still proves helpful to you. If you have any further questions or need clarification on anything, feel free to ask. Have a good day :)

@@geek_24 thank you so much sir for replying and giving a thorough explanation for my doubt. You seem like a good person and i pray to god that you may achieve all the greatness that you desire in your life.

Hi, you're right, it's not responsive at the moment. Since this tutorial was aimed at beginners, I didn't focus much on responsiveness. However, I'll update the code on GitHub to make it mobile-responsive soon.

Thank you so much. Your comment means a lot to me. Your words are more precious to me than a million subscriptions. ❤️❤️

Hi, unfortunately, I do not have such a video. However, if you can explain your requirement or what you mean by a dynamically created tooltip, I can help you.