DEV Community: Adyasha Mohanty

Season 1: The one where HackerRank discovered Adyasha

Adyasha Mohanty — Thu, 15 Dec 2022 13:19:52 +0000

After interning at HackerRank for the past year and a half, writing a blog now seems strange, doesn't it?

I KNOW!!

So stay tuned for this series, in which I will be releasing the seasons of my J.O.U.R.N.E.Y at HackerRank. And a series without a climax at the end is all a moo point, so hang tight for the final season, y'all!

I hope you get all the F.R.I.E.N.D.S references and if you don't 😳 ... well then I guess you need to go on a BREAK and binge-watch it. Thank me later!😌

"So no one told you life was gonna be this way....."

Well, the day I received this mail from Vassavi, no one could have told me my life was gonna change this way!

One hot April afternoon, freshly heartbroken (found out my lobster🦞 wasn’t my lobster at all 💔), I was cocooned in my bubble when I got this mail from one of the most fun and passionate HR ever.

This wasn’t just a mail, it practically rescued me 🥹! I was pumped and started figuring out how to go ahead with this. I approached one of my seniors, Muskan Khedia who was then an intern at HackerRank. Being the Monica she is, she helped me with the referral and thus, I answered the mail with my resume and the necessary documents.

It was all going smoothly. A bit too smooth. And of course, life had to mess up. Yes ~~guys~~ folks you guessed it right, I got down with Covid 😷 . That day, "it was like there’s rock bottom, 50 feet of crap, then me."

So I got admitted to the hospital, bedridden for two days straight. And as if the universe was testing me, I received a call from Vassavi regarding the interview process. The interview got scheduled while I was still admitted 🤦🏻‍♀️ !

The only thought in my mind? If not now, then never. I buckled up my mind and started getting ready for the interview that changed my life.

Okay, enough about the pre-interview overthinking. Let’s talk about the real deal. So after I got enough information regarding the test, my preparation started with exploring what HackerRank is all about. Its core values, qualities that they look for in their folks, and what exactly was I expected to present to crack it. I went through all the past projects that I was going to showcase, thoroughly understood my role in all my past internships and polished my React skills by going through a bunch of articles, quizzes, and blogs.

But then my brain asked, Bro what about DSA?! 🤷🏻‍♀️ To disclose the fact, I was quite reluctant for the interview as I felt, HackerRank being synonymous with Data Structures and Algorithms, they might focus a bit more on my DSA knowledge instead of my dev skills.

But oh boy, could I BE any more wrong! I got to know, the core requirements for SDE interns at HackerRank were development skills.

And now, with some newly gained confidence, I furnished my dev skills and awaited the interview.

Well now moving on to the interview….
Should I go on? 🤔 Oh, I wish I could, but I don’t want to.

To read the whole season go check my blog!

Feel free to connect on Twitter :)

A Guide to React Context 💫

Adyasha Mohanty — Sun, 30 Jan 2022 19:36:15 +0000

What is React Context 🤔?

The React Context provides a way to pass data through the component tree without having to pass props down manually to every level. In React, data is often passed from a parent to its child component as a property.

Context is like a global object to the React component sub-tree 🌐.

What problems does Context solve 😟?

In React applications let parent components pass data long to children components but issues arise when that data is meant to be used by children components multiple layers deep but not by immediate children of that parent component.

Let's look at the below diagram 📈.

Component A is clearly the main parent component with immediate children components B, C. These components can receive params from component A and pass that data to the children components, but what about a scenario where Component E needs data from Component A and that data is not needed in Component B then passing that data to Component B becomes redundant.

Props drilling, a term to describe when you pass props down multiple levels to a nested component, through components that don't need it.

This is the benefit of React context - it provides a cool way 😎 of making data readily available to every single child component in the React Application.

How do we use Context 😕?

As far we get to know that React context allows us to pass down and use (consume) data in whatever component we need in our React app without using props.

Using the new React Context API depends on four main steps:

🔸 Create Context using the createContext method. This function then returns an object with a Provider and a Consumer.

import React from 'react';

const AuthContext = React.createContext();

🔸 Next, use the Provider component to wrap around the parent/main component.

🔸 Wrap child components in the Provider component and make it accept a prop called value. This value can be anything!

<AuthContext.Provider value={value}>
  <Demo />
</AuthContext.Provider>

🔸 Use the Consumer component anywhere below the Provider in the component tree to get a subset of the state.

function Demo() {
  return (
    <AuthContext.Consumer>
      {value => <h1>{value}</h1>}
    </AuthContext.Consumer>
  );
}

📌 Let's see the full example:

import React from 'react';

export const AuthContext = React.createContext();

export default function App() {
 return (
   <AuthContext.Provider value="Happy">
    <Demo />
   </AuthContext.Provider>
 )
}

function Demo() {
  return (
    <AuthContext.Consumer>
      {value => <h1>{value}</h1>} /* prints happy */
    </AuthContext.Consumer>
  );
}

Above our App component, we are creating context with React.createContext() and putting the result in a variable, AuthContext.

In almost every case, you will want to export it as we are doing here because your component will be in another file.

Note that we can pass an initial value to our value prop when we call React.createContext().

The created context is an object with two properties: Provider and Consumer, both of which are components.

Things to keep note down what Provider actually do ✍️:

➡️ It holds one single javascript value that can be anything: an array, a function or an object.

➡️ It won’t cause its children to re-render: The context’s provider’s direct children won’t re-render every time the provider renders, but the consumers will.
This rule is only valid for re-renders caused by the provider internally (state), but if his parent re-renders (props), the provider’s children will re-render as well.

➡️ All subscribers will re-render when the context value changes.

In our App component, we are using AuthContext. Specifically AuthContext.Provider, To pass our value down to every component in our App, we wrap our Provider component around it and in this case, Demo.
On AuthContext.Provider, we put the value that we want to pass down our entire component tree. We set that equal to the value prop to do so. (here, Happy).
In Demo, or wherever we want to consume what was provided in our context, we use the consumer component: AuthContext.Consumer To use our passed-down value, we use what is called the render props pattern.
It is just a function that the consumer component gives us as a prop. And in return for that function, we can return and use that value.

Another way of consuming context with the useContext hook.

📌 Here is the same example using useContext:

import React from 'react';

export const AuthContext = React.createContext();

export default function App() {
 return (
   <AuthContext.Provider value="Happy">
    <Demo />
   </AuthContext.Provider>
 )
}

function Demo() {
 const value = React.useContext(AuthContext);
 return <h1>{value}</h1>; 
}

useContext accepts the context type as parameter and returns the context value of the nearest provider of that type. If there is no such provider, then the default context value will be returned.

Will app’s performance get impacted 💥?

🔹 In short, you app’s performance will decrease drastically if your provider does a lot of work, for example having a value that combines a lot of separate values, you will have a lot of consumers of the same provider, and they will all re-render.

🔹 When the provider’s wrapper re-renders due to an internal cause (may be state), its children won’t re-render, only a consumer will. It is like your provider’s value teleports from the provider to the consumers directly ignoring everything in between.

🔹 So, it is more than okay to have multiple contexts and providers.

What differs Redux from context API ?

As you can see, the concepts involved are actually not that different from Redux.

So does context replaces redux?

The answer is NO🙅.

Redux isn’t only a way to pass down props( teleports them), it allows persistence, supports middlewares, and has a lot more advantages.
My recommendation is to use Redux for complex global state management and Context for prop drilling.

As this article isn’t meant to talk about redux, so, I will drop some useful resources to read more about this comparison 👇.

Answer on StackOverflow.
Dan’s post about You Might Not Need Redux.

In this article, we explored how we can easily use React Context instead of passing down props to share data between components 🚢.
Depending on your use case, you might prefer to use simple props, React Context or even a third-party library like Redux to share data between your components.

// Detect dark theme var iframe = document.getElementById('tweet-1483511651890778112-64'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1483511651890778112&theme=dark" }

Keep coding 😉. Thank you for reading 💖.

Feel free to connect on Twitter :)

How to manage API calls in React ⚛️

Adyasha Mohanty — Mon, 05 Jul 2021 09:48:46 +0000

React library is well known for building rich and highly scalable user interfaces. There are many ways to fetch data from an external API in React.

Before you go through this blog be familiar with React library and Application Programming Interface (API).

In this blog, we will discuss different ways to manage API calls in React. In the end, you will be able to choose the best approach based on the application requirements.

1. The Fetch API

Fetch API is built into most modern browsers on the window object (window.fetch) and enables us to make HTTP requests very easily.

The following code snippets show a simple example of using Fetch API in practice.



import {useEffect} from "react";

const fetchUsers = () => {
// Where we're fetching data from
return fetch("http://www.abc.cd/test")
// We get the API response and receive data in JSON format
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch ((error) => console.error(error));}

The only goal of this function is to access the data and to convert the response into JSON using the response.json() method.
Here, the use of the json() method is to get the response object which is stored in data and used to update the state of users in our application.

The fact that Fetch is promise-based means we can also catch errors using the .catch() method. Any error encountered is used as a value to update our error’s state.

Added to that, we make this request within the useEffect() hook with an empty dependencies array as the second argument so that our request is only made once, not dependent on any other data.
Here is an example how to use it in useEffect() hook:



import {useEffect} from "react";

useEffect(() => {
    fetchData()
  }, []);

Isn’t this handy! Let’s see what other methods do 😃.

2. Axios Library

Axios is a Promise-based HTTP client for JavaScript which can be used in your front-end application and your Node.js backend.
By using Axios it’s easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations.

In this example, we have to first install Axios using npm or yarn and then add it as an import to your parent component.



npm install axios

The following code snippets show an example of using Axios:



import axios from "axios"

const fetchData = () => {
return axios.get("http://www.abc.cd/test")
   .then((response) => console.log(response.data));
}

Similar to the Fetch API, Axios also returns a promise. But in Axios, it always returns a JSON response. The coding part is similar to the Fetch API, except for shorter steps and better error handling.

Check out the official documentation for better knowledge.

3. Async-Await syntax

Async/await is a relatively new way to write asynchronous code synchronously.

The async keyword before a function has two effects:

Make it always return a promise.
Allows await to be used in it.

The await keyword before a promise makes JavaScript wait until that promise settles, and then:

If it’s an error, the exception is generated.
Otherwise, it returns the result.

The following is the code snippets :



async function fetchData() {
    try {
      const result = await axios.get("http://www.abc.cd/test")
      console.log(result.data));
    } catch (error) {
      console.error(error);
    }
  }

When we use useEffect(), the effect function (the first argument) cannot be made an async function. For that, we can create a separate async function in our component, which we can call synchronously within useEffect and fetch our data accordingly.

4. Custom React Hook

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. The idea behind custom hooks is to extract component logic into reusable functions.

So let's call our custom hook: useFetch. This hook accepts two arguments, the URL we need to query to fetch the data and an object representing the options we want to apply to the request.

Alright! Now, let's see how easy it is to fetch data with our useEffect() hook. We are going to use the Fetch API to make our request. For that, we have to pass the URL and the options we want to retrieve. From there, we get an object that we can use to render our application.



import { useState, useEffect } from 'react';
const useFetch = (url = 'http://www.abc.cd/test', options = null) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url, options)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url, options]);
  return {data}
}
export default useFetch;

We can call whenever we need to fetch data inside our application.



import useFetch from './useFetch';
  const { data } = useFetch( 'http://www.abc.cd/test' );
  console.log(data);

5. React Query Library

React-query is a great library that solves the problem of managing server state and caching in applications.

"It makes fetching, caching, synchronizing, and updating server state in your React applications a breeze”

Firstly, let’s install the required package



npm install react-query react-query-devtools

Note: React Query also has its own dev tools which help us to visualize the inner workings of React Query.

React-query gives us a cache, which you can see below through the React Query Devtools. This enables us to easily manage the requests that we have made according to the key value that we specify for each request.



import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <FetchData />
    </QueryClientProvider>
  );
}

function FetchData() {
  const { data } = useQuery("UserData", () =>
    fetch("http://www.abc.cd/test").then((res) => res.json())
  );

  return (
    <div>
       // data you want to show
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In short, we just need to tell the library where you need to fetch the data, and it will handle caching, background updates, and refresh data without any extra code or configuration.

It also provides some hooks or events for mutation and queries to handle errors and other states of side effects which remove the need for useState() and useEffect() hooks and replaces them with a few lines of React Query logic.

For better insights check out the official documentation.

There are various other ways to manage data fetching such as SWR, GraphQL API, but this blog post is not actually explaining them in depth but you can check it out :)

That's all about it. By the way don't forget to check out the comment section of the following tweet. This might help you to choose the best approach.

// Detect dark theme var iframe = document.getElementById('tweet-1347978564251963392-899'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1347978564251963392&theme=dark" }

Happy coding 😉. Thank you for reading my blog 💖.

Feel free to connect on Twitter :)

Why you should use Chakra UI ⚡️ ?

Adyasha Mohanty — Wed, 02 Jun 2021 14:46:33 +0000

Before beginning coding one significant question sprung up always: “Which library would it be a good idea to style the components?”

I’ve worked on various libraries such as Bootstrap, Material UI or styled-components. And you may be thinking why you need another UI library when you already have a big alternative.
Recently, Chakra UI ⚡️ has gained a lot of attraction because of its accessibility and high customization.

Installation⚙️

Chakra UI can be installed via NPM/Yarn.

// If you are using npm:
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

// or, using Yarn:
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Once the packages are installed, a provider needs to be configured.


import { ChakraProvider } from "@chakra-ui/react";

function MyApp({ Component, pageProps }) {
    return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    );
}

export default MyApp;

Benefits of Chakra UI 📖

Simpler Components : The best feature of Chakra UI is how components are designed to be small so that you can compose them together. You can build bigger elements easily by arranging them the same as HTML tags.

Let's look here: Box and Text are the most basic components just like div and p tags respectively.

<Header>
 <Box w={{ base: "70%", sm: "50%", md: "40%" }}>
   <Text>Hey, Adyasha!</Text>
   <Button>Click me</Button>
 </Box>
</Header>

Don't forgot to import the components: Header, Box, Text from @chakra-ui/react

Note: For better sight, you can check the official documentation, there you can see plenty of components which will be enough for building your project.

Easy to theme and customize : One of the advantages of Chakra UI is that you can easily adjust it to your design needs. Inside the styles folder, Create a theme.js file. You can specify things like font-family, font-sizes, colors, breakpoints, etc.

import { extendTheme } from '@chakra-ui/react'

const customtheme = extendTheme({
        Heading: {
            variants: {
                h1: {
                    fontSize: '4xl', fontWeight: 'bold'
                },
                h2: {
                    fontSize: '2xl', fontWeight: 'semibold'
                }
            }
        }
})

export default customtheme

Dark mode support : By default, most of Chakra's components are dark mode compatible. A little bit of change in theme config and you are good to go ✈︎

Note: In some cases, when you switch to dark mode and refresh the page, you might experience a quick flash of white mode before it switches correctly and they're looking to fix it.

Responsive styles : Chakra UI supports responsive styles out of the box. To add them, we can set default breakpoints or you can create your own.

import { createBreakpoints } from "@chakra-ui/theme-tools"

const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
})

You can use these breakpoints to resize your box or div:

<Box width={{sm: '200px', md: '400px', xl: '600px'}}>
  Me, fully responsive :)
</Box>

Preview 👀:

I built a simple project or you can say just a landing page with NextJS and Chakra UI and the reason behind this project is to learn more about the features of Chakra UI and it was by far the easiest component library I’ve tried so far.

Take a sneak peek:

This is all only a little model I think if you want to cover all the customisation of this library go check the official documentation.

📍 Conclusion:

As a promising new library, it is constantly improving and the hype is building around the library. More components will probably be added soon. So you can consider using it for your next React project :D

I share what I think on Twitter💙. This post is also posted on my blog page.

🙌 Support me:

My projects are fueled by coffees ☕, get one for me!

React-Notifications ⚠️

Adyasha Mohanty — Tue, 20 Apr 2021 11:21:57 +0000

Here I’ll show how we can handle notifications in our React project. First, we’ll be using react-notifications🔔, which, as its name suggests, is a notification component for React.

Installation:

Go to the client project directory and install the following npm package:

npm install --save react-notifications
or
yarn add react-notifications

Setting up the Notification container:

Now update the App.js file. Import NotificationContainer from react-notifications and the notifications.css file.

...
// React Notification
import 'react-notifications/lib/notifications.css';
import { NotificationContainer } from 'react-notifications';
...
...
return (
 <Router>
  <div>
   ...
   ...
   <NotificationContainer />
  </div>
 </Router>
);

So far, we have completed our setup for NotificationContainer.

NOTE: Use only one NotificationContainer component in the app.

Now it’s time to pass notifications from different components to display their message.

Setting Notifications from components:

// React Notification
import { NotificationManager } from 'react-notifications';

// Add this line where you want to show the notification
NotificationManager.info('Hey I am Adyasha', 'Info!', 2000);

Horray, you did it. Now you can run your project.

Available NotificationManager APIs:

You can apply this same method to different components in your project. Notifications will be displayed in different colors depending on the notification type.
For this package, there are four different APIs available to us of the following types:

info
success
warning
error

Here’s an example for the success type — simply replace success with the proper notification type for the given situation :

NotificationManager.success(message, title, timeOut, callback, priority);

You can also pass five different parameters along with the message: message, title, timeOut, callback, and priority.

The parameters that follow the notification type are described below:

message: The message we want to pass. It has to be a string.
title: The title of the notification. Again, its type is a string.
timeOut: The popup timeout in milliseconds. This has to be an integer.
callback: We can pass a function (type; function) through the notification. It executes after the popup is called.
priority: This is a boolean parameter. We can push any notification to the top at any point by setting the priority to true.

That's all. Thanks for your patience ❤️! Have a nice day ;)

Find me on Twitter @Adyasha8105👀.

Using Font Awesome 5 🏳️ in React

Adyasha Mohanty — Tue, 16 Feb 2021 09:53:27 +0000

The Font Awesome went all out with new version 5 adding a wide variety of SVG icons and providing users with new features🤩.

If you’ve worked with Font Awesome in the past, something like fa-profile might look familiar. Font Awesome introduced icon styles like fas for Font Awesome solid, fal for Font Awesome Light, etc. This adds a great deal of flexibility for UI/UX design.

Moreover, there are Font Awesome packages (like the one we're going to use!) for React, Angular, and Vue 😮.

Installation

To get started, we’re going to install react-fontawesome along with their libraries.

// If you are using npm:
$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

// or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

The packages we're introducing just contain the free version 🆓. If you’re looking to utilize new _pro icons and styles, look at their site for additional installation and setup directions._

Implementation

Let's move forward to implement these beautiful icons 👌 throughout our app.

There are numerous approaches to utilize these symbols however we will going to focus on building a library to effortlessly get to all symbols.

The following code to add icons to the library can be done at a root level of our application i.e App.js. We’ll start by importing the required files and calling fontawesome-svg-core’s library.add to pull our icons.

//App.js

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCheckSquare, faMugHot } from "@fortawesome/free-solid-svg-icons";

library.add( faCheckSquare, faMugHot);

//...

All icons can be found in Font Awesome’s icon library.

We have successfully added the icons we need. Now it's time to implement it in our component 👍.
Imagine that we have a component called Icon.js. Since they are already been added to our library in App.js we just need to import this:

// Icon.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Drink = () => (
    <div className="App">
      <div>
       <FontAwesomeIcon icon="check-square" />
       Drink: <FontAwesomeIcon icon="mug-hot" />
      </div>
    </div>
)

By adding faCheckSquare and faMugHot to the library, we can refer to them throughout the app using their icon string names check-square and mug-hot (in lowercase letters).

Wait 🤔, I think our icons and text are a little squished and, might I venture to say, boring, so let’s add a space between the icon and the text and change the icon’s color and size :

<FontAwesomeIcon icon="check-square" />{' '}
Drink: <FontAwesomeIcon icon="mug-hot" color="pink" size="2x" />

As you can see, the FontAwesomeIcon component can take a few different props to change the icon style. Here we used the color and size props. The size prop expects a string value like xs, lg, 2x, 3x and so on 😃.
There are quite a few more props that can be passed-in. Notably, the rotation and pulse boolean props will have the icon rotate on itself.

Note: Don't use the CDN link of FontAwesome in your index.html file. It will decrease the performance of your site.

Conclusion

That's all. Hurray🎉, you did it. The process is pretty straight-forward but you can easily implement this in your app. Do give it a try, you will definitely love it 😍.

Thanks for Reading! Have a great day :)

Find me on Twitter @Adyasha8105👀.
This post is also posted on my blog page.

Intro to Styled-Components 💅...

Adyasha Mohanty — Wed, 03 Feb 2021 16:09:03 +0000

Styled-Components💅 is the leading framework in CSS-in-JS libraries all over the world. They are easy to integrate into existing applications that are using other methods of styling.
By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.

The main reason for this popularity is that: finally, we can use the power of JavaScript inside our stylesheets💪.

The easiest way we can modify styles with JavaScript is using inline styles. It is not super efficient and even elegant, but it is absolutely legal and the greatest benefit of this technique is that the styles will be encapsulated in the scope of the component.

React supports inline styles from the beginning of its existence so it can be a way of creating styles in React applications⚛️.

Note: Styled components are available both for React and React Native, and while you should definitely check out the React Native guide, our focus here will be on styled-components for React.

Installation⚙️

Styled-Components can be installed via NPM like almost everything else you need to develop with React.js.

npm i styled-components
or
yarn add styled-components

Starting Out🏃

Then you can import the library into React.js, and create our first styled component. Put these simple lines in your react code:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  color: red;
  font-size: 15px;
`;

function OurFirstComponent() {
  // any other component
  return <StyledButton> Login </StyledButton>;
}

vscode-styled-components is a great extension for VS Code.

First of all, you have to import the styled function from styled-components package and after that, you can choose from the predefined set of HTML tags (the library supports them all) an interesting component to use.

The part of the code after the import statement looks like function invocation but here we have backticks 😮instead of brackets.

styled-components use one of the newest features from the_ES6 standard_ of JavaScript called tagged template literals.

So basically the code between backticks is a body of the button function.
Isn’t it look familiar 👀? Well, it should, because this is a regular CSS code with regular CSS syntax.

In raw HTML and CSS, we would have this:

button {
  background-color: black;
  color: red;
  font-size: 15px;
}

<button> Login </button>

In short🤏: StyledButton is the styled component, and it will be rendered as an HTML button with the contained styles. styled is an internal utility method that transforms the styling from JavaScript into actual CSS.

And that is all! Incredibly easy to start with if you know CSS 😃. Let’s move further👉.

Passing props😉

Styled components are functional, so you can easily style elements dynamically.
Imagine you have two types of buttons on your page having different background colors and you are not allowed to make two different styled-components. Then What should you do 🤔?

In this case, we can adapt their styling based on their props. We can pass additional properties into a styled component in the same way you pass them in other React components:

import styled from "styled-components";

const StyledButton = styled.button`
  border: none;
  min-width: 300px;
  font-size: 15px;
  padding: 6px 8px;
  /* the resulting background color will be based on these props */
  background-color: ${props => props.bg === "black" ? "black" : "red";
`;

function BackgroundComponent() {
  return (
    <div>
      // Use of different props
      <StyledButton bg="black"> Button1 </StyledButton>
      <StyledButton bg="red"> Button2 </StyledButton>
    </div>
  )
}

Here, StyledButton is a React component that accepts props, we can assign a different background color based on the existence or value of the bg prop. Isn't it cool 😎?

More Features✍️

The examples which I presented are really simple and basic, but styled-components has more useful features including:

Theming – Styled-components provides theming capabilities and enables you to support multiple looks and feels.
Nested rules – If you are familiar with SASS or LESS preprocessor you know how nesting rules can be useful. With styled-components, it is possible too.
Scoped selectors – You don’t have to think about naming conventions to avoid selector collisions on your pages.
Dead code elimination – Styled-components has an optional configuration to remove code that does not affect the program results.
Global Styling - The styled-components framework also enables you to create global styles to be applied to all styled-components.
Server-side rendering support – By using ServerStyleSheet object and StyleSheetManager you can utilize all styles from the client-side and returns them from the server-side.
Stylelint support – Good real-time linting is priceless when you have to debug your styles.
Use with other CSS frameworks – You can use styled-components with any CSS framework like Material Design styled component.

As you can see, there are a lot of features that you can use while working with styled-components.

For more Information, the styled-components documentation is always a good place to go.

The idea behind styled-components can be really weird at the beginning of your journey but if you give it a try, you will love it 😍.

Thanks for Reading💙! Have a great day :)

Find me on Twitter @Adyasha805.
This post is also posted on my blog page.

My journey to the Open-source world

Adyasha Mohanty — Thu, 03 Sep 2020 08:00:47 +0000

GSSoC’20: Beginning of a new journey

I was always interested in Open Source contribution from long back but was not able to start as I felt it’s not much beginner-friendly. I started searching about how to get started with it and finally landed up to GirlsScript Summer of Code. I read all about it and I was highly exuberant and applied for it immediately. I was extremely happy and pumped when I received that I am shortlisted for the same🎉.

And thus started, the 3 months-long journeys of my contribution to GSSoC’ 20 on 1st March 2020. There were various projects based on different skills and every participant is free to claim any project. Even one can contribute to multiple projects as per their choice. There was so much ambiguity in my mind as there were so many projects to chose from. I ended up taking some projects.

My First Contribution was to a project named as Water Monitoring System as the initial issues in that project were quite beginner-friendly. It was initially difficult getting used to the environment (Fixing the merge conflicts and much more) as I was very unfamiliar with git and all the projects which were on GitHub, so I followed some youtube videos and read blogs and also with the help of my sister, it became a piece of cake😎.

There are many things that seem impossible only so long as one does not attempt them.

Then after some contribution, I landed up into another project which is Crop AI (Frontend). My experience here was amazing. I got to learn about various tech stacks like HTML, CSS, Javascript in-depth, and also about UX/UI designing.

After the frontend part in Crop AI was over, I got interested in another project named Girscript Boilerplate Website. Here I built my skill set even more. It was during the contribution to the documentation of this project, I got to learn about Sphinx which taught me a lot 😊. Once I figured out how things operate, it was fairly straightforward to work with and I started taking up a variety of challenging issues and bugs to solve and secured a spot as the top contributor of the project (edited).

Like initially I had no idea about UX/UI designing. After taking some design issues, for example, the landing page of the Water Monitoring System, the logos for the Crop AI project( you can see my logos present in the project both in frontend and backend part), the logo for the Girscript Boilerplate Website, and also the whole promotional website for the Girlscript_app present in Girscript Boilerplate Website and many more, I have added a new skill into my skill set😃. And now I am so fascinated with this field that I don’t mind spending my whole day working on the design, checking other people's work on Behance, Dribbble, etc.

Apart from all these projects, I also have made few contributions to some other projects like Technotica Curriculum, Crop AI (Backend & Android-application), BossY, Ignitus Client.

It almost feels like yesterday that I started my contribution. My journey with GSSoC has motivated me to explore more of the open-source world! I would like to thank the GirlScript Summer of Code and the GirlScript Foundation for this incredible opportunity, along with my mentors who have always been supportive and encouraged me to keep learning.

Looking forward to taking a deeper dive into the Open Source world from now onwards🙌.

By the way, I just forgot to add that if you observe my GitHub, Adyasha Mohanty then there is a big change starting from one to 521 contributions that make me proud of my journey so far.

Thanks for reading till the end. Keep Contributing!

Feel free to get in touch with me over Linkedin, Twitter, or simply drop me an email at adyashamohanty8105@gmail.com😇.