Forem: Md Wahiduzzaman Emon

Introducing js-file_downloader--emon: A Powerful JavaScript File Downloader Package

Md Wahiduzzaman Emon — Fri, 10 Mar 2023 19:00:59 +0000

Are you looking for a powerful and reliable file downloader package for your JavaScript project? Look no further than js-file_downloader--emon, the latest package designed to help developers easily download files in their applications.

Developed by Md Wahiduzzaman Emon, js-file_downloader--emon is a lightweight and easy-to-use package that offers a range of features to simplify the file downloading process. With this package, you can easily download files from a server using a URL and even monitor the download progress.

Here's an example of how you can use this package in your code:

jsFileDownloader(url, fileName);

If you want to see the progress of the download, you can pass a function as the third parameter

jsFileDownloader(url, fileName, (progress) => {
  console.log(progress);
});

If you want to use it with async/await
With js-file_downloader--emon, you can also use promises and async/await syntax to handle download requests in a more efficient manner.

try {
  const response = await jsFileDownloader(url, name, (progress) => {
    console.log(progress);
  });
  console.log(response);
} catch (error) {
  console.log(error);
}

If you want to use it with the promise

jsFileDownloader(url, name, (progress) => {
  console.log(progress);
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Parameters

url (string): The URL of the file to be downloaded
fileName (string): The name with which the downloaded file will be saved
progress (function): A function that will be called with the download progress

Functionality:

// Tries to download a file from the given URL
// Checks if the url contains “http://” and replaces it with “https://”
// Initializes the necessary variables and arrays
// Reads the response body in chunks
// Calculates the download progress and calls the progress function with the progress value
// Combines the chunks and creates a blob URL
// Creates a link element, assigns the blob URL and file name, and clicks on it to download the file
// Revokes the blob URL

*Returns:
*

// If successful, returns the downloaded file
// If an error occurs, returns the error message.

Additionally, this package is compatible with popular JavaScript frameworks such as React, Vue, Angular, and Solid JS, making it easy to integrate with your existing projects.

To get started with js-file_downloader--emon, simply install it using npm:

npm i js-file_downloader--emon

Overall, js-file_downloader--emon is a powerful and easy-to-use package that offers a range of features to simplify the file-downloading process in JavaScript applications. Whether you're a beginner or an experienced developer, this package is sure to make your life easier. Give it a try today!

Follow me on Github: https://github.com/MdWahiduzzamanEmon

Md Wahediduzzaman Emon
Software Developer

Easy Beauty Components for React

Md Wahiduzzaman Emon — Thu, 09 Mar 2023 06:48:20 +0000

**This React component library contains components you can use for your simple/large projects to write your code more clean and readable.**

This Package has also typescript supported

Click to go the package

Click to see other packages

Documentation for how to use it in your projects:

step-1: first write/paste this to your terminal to install this package (

- npm i easy-beauty-components---react
or
- yarn add easy-beauty-components---react
or
- https://cdn.jsdelivr.net/npm/easy-beauty-components---react/dist/index.min.js

step-2:

import { For, Show } from "easy-beauty-components---react";

How to use For component

import { useEffect, useState } from "react";
function App() {
  const [list, setList] = useState([]);

   useEffect(() => {
      setList([
        { name: "John", age: 20 },
        { name: "Jane", age: 21 },
        { name: "Jack", age: 22 },
      ]);
  }, []);

return (
   <For of={list}>
        {
          ({ item, index }) => {
            return (
              <li key={index}>
                {item?.name} is {item?.age} years old
              </li>
            )
          }
        }
      </For>
)
}

How to use Show component

import { useEffect, useState } from "react";
function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <Show when={show}>
        <h1>Hello World</h1>
      </Show>
    </div>
  );
}

Also you can FallBack prop to show loading or something else when the condition is false in Show Component

with Fallback Props-

import { useEffect, useState } from "react";
function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      <Show when={show} Fallback={<>Loading...</>}>
        <h1>Hello World</h1>
      </Show>
    </div>
  );
}

Required Props

For Component->
of: Array*

Show Component->
when: Boolean*
FallBack: JSX.Element

Answer: Google charts - change axis text color

Md Wahiduzzaman Emon — Mon, 06 Mar 2023 10:08:38 +0000

Mar 6 '23

**check this option value -
const options: {
        legend: {
            position: string;
        };
        colors: string[];
        bar: {
            groupWidth: string;
        };
        annotations: {
            alwaysOutside: boolean;
            textStyle: {
                fontSize: number;
                auraColor: string;
                color: string;
            };
        };
        fontSize: number;
        chartArea: {
             width: '95%',
             height: '80%',
        };
        backgroundColor: {
           fill :{}
        };
        hAxis: {

…

Open Full Answer

Answer: Google Charts (JS) - is there a way of using a transparent background on a chart?

Md Wahiduzzaman Emon — Mon, 06 Mar 2023 10:00:46 +0000

Mar 6 '23

using backgroundColor property to the options object variable-
backgroundColor: {
            fill: transparent;
        };

It will work perfectly. Thanks

Open Full Answer

Answer: Best way to dim/disable a div in Material-UI?

Md Wahiduzzaman Emon — Tue, 28 Feb 2023 05:43:37 +0000

opacity: contidion ? 0.5 : 1,
pointerEvents: contidion ? "none" : "auto",

Feb 28 '23

-2

use sx props or style in material to disable

<Box sx={{ opacity: <contidion> ? 0.5 : 1,pointerEvents:<contidion> ? "none" : "auto"}}/>

you can use this way any kind of div/tag in html

Open Full Answer

Answer: How to Make Material-UI Menu based on Hover, not Click

Md Wahiduzzaman Emon — Mon, 20 Feb 2023 08:39:23 +0000

If hover not working checkout this solution.

Feb 20 '23

use **MenuListProps** in the Menu component and use your menu **closeFunction** -

MenuListProps={{ onMouseLeave: handleClose }}

example- 
 <Menu
      dense
      id="demo-positioned-menu"
      anchorEl={anchorEl}
      open={open}
      onClose={handleCloseMain}
      title={item?.title}
      anchorOrigin={{
            vertical: "bottom",
            horizontal: "right",
                    }}
      transformOrigin={{
            vertical: "top",
            horizontal: "center",
                    }}
      MenuListProps={{ onMouseLeave: handleClose }}
 />

I hope it will work perfectly.

Open Full Answer

Answer: 404: NOT_FOUND on Vercel deployment

Md Wahiduzzaman Emon — Tue, 22 Nov 2022 11:57:30 +0000

Nov 22 '22

in the root create a file name- vercel.json

{
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Open Full Answer

Browser Storage Hook React

Md Wahiduzzaman Emon — Mon, 21 Nov 2022 10:22:04 +0000

import this ->
import { useLocalStorage,useSessionStorage } from 'browser_storage_hook_react';

uses ->
const [value, setValue] = useLocalStorage('key', 'defaultValue');
const [value, setValue] = useSessionStorage('key', 'defaultValue');

browser_storage_hook_react - npm

React hook for localStorage and SessionStorage and Cookie. Latest version: 1.0.2, last published: a year ago. Start using browser_storage_hook_react in your project by running `npm i browser_storage_hook_react`. There are no other projects in the npm registry using browser_storage_hook_react.

npmjs.com

Answer: Fatal: Not possible to fast-forward, aborting

Md Wahiduzzaman Emon — Mon, 21 Nov 2022 10:01:35 +0000

Nov 21 '22

Try this. It will work nicely.

git pull origin --rebase

After you get the non-fast-forward error, just do below :

git pull --rebase origin <name-of-the-remote-branch>

This will fetch the remote changes to your local branch. On top of that, it will apply your local commits.

Then

git push origin <name-of-the-remote-branch>

…

Open Full Answer

Answer: Can't push to GitHub because of large file which I already deleted

Md Wahiduzzaman Emon — Wed, 16 Nov 2022 19:47:44 +0000

Nov 16 '22

Check your last commit id on GitHub and then use this

git reset --soft <commit_id>

I think it's work. Thanks

Open Full Answer

React Dynamic Nested Table

Md Wahiduzzaman Emon — Sun, 13 Nov 2022 05:17:56 +0000

MdWahiduzzamanEmon / React_Dynamic_Nested_Table

Dynamic nested and filtered table

React Dynamic Nested Table

This is a table component that is so powerful to create a nested table, and also can filter(show-hide) columns.

Installation

Use the package manager npm/yarn to install react dynamic nested table.(please read the documentation first)

npm i react_dynamic_nested_table

yarn add react_dynamic_nested_table

Screen.Recording.2022-11-12.at.11.45.31.PM.mov

Usage

import MainTable, { FilterTableColumn } from 'react_dynamic_nested_table';

How to use table component

How to use a simple table :

 const titles = [
      'Name',
      'Age',
      'Address',
      'Phone',
    ]

const data = [
      {
        name: 'John',
        age: 20,
        address: 'Jessore',
        phone: '123456789',

      },
      {
        name: 'Doe',
        age: 30,
        address: 'Dhaka',
        phone: '123456789',
      }
    ]

<MainTable data={data} titles={titles} />

# How to use dynamic table :
 const titles = [

…

View on GitHub

react_dynamic_nested_table - npm

React Dynamic Nested Table. Latest version: 1.3.9, last published: 9 months ago. Start using react_dynamic_nested_table in your project by running `npm i react_dynamic_nested_table`. There are no other projects in the npm registry using react_dynamic_nested_table.

npmjs.com

Answer: React 18: Hydration failed because the initial UI does not match what was rendered on the server

Md Wahiduzzaman Emon — Sun, 13 Nov 2022 05:07:23 +0000

Nov 13 '22

-3

Just go main parent component and set the state:

const [isSSR,setIsSSR]=React.useState(false);
React.useEffect(()=>{
  setIsSSR(true);
})
return (
  isSSR && (
    <>
       //your component here
    </>
  )
)

</p>

Open Full Answer

https://stackoverflow.com/a/74418607/16836455