DEV Community: Akash Gupta

How to Use React Router Dom as Pro

Akash Gupta — Wed, 22 Sep 2021 05:27:31 +0000

Routing is super important part of any SPA, without it you can’t navigate to another page.

Are you really managing it in a Best way?

Let’s suppose, we have more than 100 pages in React and have routing of each pages and one page may have linked to another page. we will write something like this

and have linking like this

if we are managing it like above so the project code will gonna lose its cleanliness and richness very soon.

So what’s the best way to manage it?

*Define all Routes inside *routing/AppRoutes.ts

Use **AppRoutes **like this

*To make it more global and readable, create **routing/*useAppRoutes.ts

now we need pass Param taskId in TASK_DETAIL. **there can be easier way like this below but **i will not recommend it.

Let’s make it more cleaner by overriding useHistory hook

npm i urlcat — save

routing*/useMyHistory.ts*

Finally we made it now it’s time to use it on our code.

Goto routing/useAppRoutes.ts *replace useHistory with useMyHistory*

Final Page Look Now

Here is **Git Example .**

Thanks for reading, I hope this gives you an idea of how to handle React Routing in cleaned and global way. Claps and shares are very much appreciated!

If you enjoyed reading this, you may also enjoy some of my other blogs:

Generate SVG icons for React.Js Typescript

Akash Gupta — Wed, 22 Sep 2021 05:13:04 +0000

Generate SVG icons for React.Js Typescript

I was keep looking for a library that can generate typescript icons but i didn’t get success so i decided to make a library myself.

Generate React Icon Component from SVG icons to show, resize and recolor them. The default template is a typescript template.

npm install --save-dev react-svg-icon-generator-v2

Setup a node file

Default mode

const generator = require('react-svg-icon-generator-v2');
const config = {
    svgDir: './src/ui/icons/',
    destination: './src/components/ui/Icon.tsx'
};
generator(config);

Split mode

const generator = require('react-svg-icon-generator-v2');
const config = {
    svgDir: './src/ui/icons/',
    mode: 'split',
    destination: './src/components/ui/Icon.tsx',
    iconDestination: './src/components/ui/icons/'
};
generator(config);

svgDir (required) - path to your directory with svg files. Can be relative path but it is better to use path.join(__dirname, 'icons') absolute path so it will work in any directory of project
destination (required) - path.join(__dirname, 'components', 'Icon.js')
mode (optional) (single or split) - choose mode for generating icons. default mode is generate icons to one file. split is mode for generating each icon to react component
comment (optional) - it will be added to generated component, so other developer will know what to do
template (optional) - provide path to your custom template, you can look at example at Icon.template
iconTemplate (optional) - provide path to your custom template for each icon, you can look at example at Icon.template

Use generate Icon component

import React, {Component} from 'react';
import AppIcon from './AppIcon';

export default class App extends Component {
  render() {
    return (
      <div>
        Simple possible usage
        <AppIcon name='clock' />

        Setup color and bounding width and height
        <AppIcon name='close' color='#748' width={500} height={100} />

        Setup color and bounding width and height to size (square)
        <AppIcon name='close' color='red' size={600} />

        Setup onClick behavior
        <AppIcon name='close' onClick={() => alert('clicked on icon')} />

        Show all icons at once with description (for finding right icon)
        <AppIcon preview />
      </div>
    );
  }
}

You can find example here Github

Generate SVG icons for React.Js Typescript

Akash Gupta — Fri, 30 Jul 2021 15:09:58 +0000

Generate SVG icons for React.Js Typescript

I was keep looking for a library that can generate typescript icons but i didn’t get success so i decided to make a library myself.

Generate React Icon Component from SVG icons to show, resize and recolor them. The default template is a typescript template.

npm install --save-dev react-svg-icon-generator-v2

Setup a node file

Default mode

const generator = require('react-svg-icon-generator-v2');
const config = {
    svgDir: './src/ui/icons/',
    destination: './src/components/ui/Icon.tsx'
};
generator(config);

Split mode

const generator = require('react-svg-icon-generator-v2');
const config = {
    svgDir: './src/ui/icons/',
    mode: 'split',
    destination: './src/components/ui/Icon.tsx',
    iconDestination: './src/components/ui/icons/'
};
generator(config);

svgDir (required) - path to your directory with svg files. Can be relative path but it is better to use path.join(__dirname, 'icons') absolute path so it will work in any directory of project
destination (required) - path.join(__dirname, 'components', 'Icon.js')
mode (optional) (single or split) - choose mode for generating icons. default mode is generate icons to one file. split is mode for generating each icon to react component
comment (optional) - it will be added to generated component, so other developer will know what to do
template (optional) - provide path to your custom template, you can look at example at Icon.template
iconTemplate (optional) - provide path to your custom template for each icon, you can look at example at Icon.template

Use generate Icon component

import React, {Component} from 'react';
import AppIcon from './AppIcon';

export default class App extends Component {
  render() {
    return (
      <div>
        Simple possible usage
        <AppIcon name='clock' />

        Setup color and bounding width and height
        <AppIcon name='close' color='#748' width={500} height={100} />

        Setup color and bounding width and height to size (square)
        <AppIcon name='close' color='red' size={600} />

        Setup onClick behavior
        <AppIcon name='close' onClick={() => alert('clicked on icon')} />

        Show all icons at once with description (for finding right icon)
        <AppIcon preview />
      </div>
    );
  }
}

You can find example here Github

React Native: How i followed "create once use many times"

Akash Gupta — Fri, 30 Jul 2021 15:05:10 +0000

My client hired me for saving his life from messy code so i started refactoring the code by converting them into reusable and smaller components that can be follow create once use many times.

Refactoring someone else code can be tough but i tried and successfully refactored whole code of more than 100 screens.
I tried so many libraries to achieve a theming system according to client requirement but every other library have own problem and less support for resolving issues so i started setup my own thing.

My First component was a Container which can be used everywhere and for every need. Believe me it saved me from boilerplate.

For ex: we have 4 Text component and i wanted to make space between them is 5. how we normally do like this

Make it in a Row

Don't you think it is getting start messy.
Check My Version, it is clean right 😁

Let's start baking it

We have not finished yet, now it's time to create Container

p - padding
m - margin
x - horizontal
y - vertical
l - left
r - right
pr - padding right
pl - padding left
px - padding horizontal
py - padding vertical
pxy - padding all
mr - margin right
ml - margin left
mx - margin horizontal
my - margin vertical
mxy - margin all

spaceBetween - space between components
hidden - hide component based on condition

😁😁😁😁😁 We just saved so much boilerplate.
Happy Coding

DEV Community: Akash Gupta

How to Use React Router Dom as Pro

Are you really managing it in a Best way?

So what’s the best way to manage it?

Let’s make it more cleaner by overriding useHistory hook

Finally we made it now it’s time to use it on our code.

Generate SVG icons for React.Js Typescript

Generate SVG icons for React.Js Typescript

Setup a node file

Default mode

Split mode

Use generate Icon component

Generate SVG icons for React.Js Typescript

Generate SVG icons for React.Js Typescript

Setup a node file

Default mode

Split mode

Use generate Icon component

React Native: How i followed "create once use many times"

React Native: How i followed “create once use many times” | by Akash Gupta | Jul, 2021 | Medium

Akash Gupta ・ Jul 29, 2021 ・
Medium

DEV Community: Akash Gupta

How to Use React Router Dom as Pro

Are you really managing it in a Best way?

So what’s the best way to manage it?

Let’s make it more cleaner by overriding useHistory hook

Finally we made it now it’s time to use it on our code.

Generate SVG icons for React.Js Typescript

Generate SVG icons for React.Js Typescript

Setup a node file

Default mode

Split mode

Use generate Icon component

Generate SVG icons for React.Js Typescript

Generate SVG icons for React.Js Typescript

Setup a node file

Default mode

Split mode

Use generate Icon component

React Native: How i followed "create once use many times"

React Native: How i followed “create once use many times” | by Akash Gupta | Jul, 2021 | Medium

Akash Gupta ・ Jul 29, 2021 ・ Medium

Akash Gupta ・ Jul 29, 2021 ・
Medium