Categories
React Answers

How to use dotenv in a React project?

Sometimes, we want to use dotenv in a React project.

In this article, we’ll look at how to use dotenv in a React project.

How to use dotenv in a React project?

To use dotenv in a React project, we create our React project with Create React App.

Then we can access environment variables from process.env.

We run

npx create-react-app my-app
cd my-app
npm start

to create the my-app project with create-react-app.

Then we can put our environment variables in an .env file.

And then we can access the variable with

const BASE_URL = process.env.REACT_APP_BASE_URL;

We can access any environment variable in .env that starts with REACT_APP_.

Conclusion

To use dotenv in a React project, we create our React project with Create React App.

Then we can access environment variables from process.env.

Categories
React Native Answers

How to use border radius only for 1 corner with React Native?

Sometimes, we want to use border radius only for 1 corner with React Native.

In this article, we’ll look at how to use border radius only for 1 corner with React Native.

How to use border radius only for 1 corner with React Native?

To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.

For instance, we write

const styles = EStyleSheet.create({
  imgBox: {
    width: px(72),
    height: px(72),
    borderBottomLeftRadius: 2,
    borderTopLeftRadius: 2,
    overflow: "hidden",
  },
  img: {
    width: px(72),
    height: px(72),
  },
});

//...

const Comp = () => {
  //...
  return (
    <View style={styles.imgBox}>
      <Image source={{ uri: "your image url" }} style={styles.img} />
    </View>
  );
};

to create a stylesheet wiht create.

We set the borderBottomLeftRadius and borderTopLeftRadius properties to set the border radius for those 2 corners in pixels.

Then we apply the imgBox style to the View which has the border radius styles.

Conclusion

To use border radius only for 1 corner with React Native, we can use the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, or borderTopRightRadius properties.

Categories
React Answers

How to add active link with React-Router v6?

Sometimes, we want to add active link with React-Router v6.

In this article, we’ll look at how to add active link with React-Router v6.

How to add active link with React-Router v6?

To add active link with React-Router v6, we set the className prop of the NavLink component to a function that returns the class name.

For instance, we write

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? "bg-green-500 font-bold" : "bg-red-500 font-thin"
  }
>
  Users
</NavLink>

to add a NavLink that goes to the users route.

We set the className prop to a function that gets the isActive property from the parameter.

Then we return the class name value according to the value of isActive in the function.

Conclusion

To add active link with React-Router v6, we set the className prop of the NavLink component to a function that returns the class name.

Categories
React Answers

How to fix React input defaultValue doesn’t update with state with JavaScript?

Sometimes, we want to fix React input defaultValue doesn’t update with state with JavaScript.

In this article, we’ll look at how to fix React input defaultValue doesn’t update with state with JavaScript.

How to fix React input defaultValue doesn’t update with state with JavaScript?

To fix React input defaultValue doesn’t update with state with JavaScript, we can update the key value when the defaultValue updates.

For instance, we write

<input defaultValue={myVal} key={myVal} />;

in our component to set the defaultValue prop to myVal to set the default value of the input.

And we set the key prop to the same value so that when myVal changes, the key prop changes, which will trigger the input to re-render.

Conclusion

To fix React input defaultValue doesn’t update with state with JavaScript, we can update the key value when the defaultValue updates.

Categories
React Answers

How to replace img src onerror with React?

Sometimes, we want to replace img src onerror with React.

In this article, we’ll look at how to replace img src onerror with React.

How to replace img src onerror with React?

To replace img src onerror with React, we set the fallback image URL when there’s an error loading the image.

For instance, we write

import React, { ImgHTMLAttributes, useState } from "react";

export default function ImageWithFallback({ fallback, src, ...props }) {
  const [imgSrc, setImgSrc] = useState(src);
  const onError = () => setImgSrc(fallback);

  return <img src={imgSrc ? imgSrc : fallback} onError={onError} {...props} />;
}

to create the imgSrc state.

We set imgSrc to src initially.

Then we add the img element with an onError prop that’s set to the onError function.

In onError, we call setImgSrc to set the image URL to fallback.

And then set the src prop of the img element to imgSrc or fallback if imgSrc isn’t set.

Conclusion

To replace img src onerror with React, we set the fallback image URL when there’s an error loading the image.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.