Styled-Components React Js

Hello Guyz Today i am going to discuss about Styled-Components in React.
Styled Components are just basically a mixture of ES6 and CSS3 for making the styling in your react applications easy and structured.
It can help you to create Reusable Styling Components means Write the component once and use it anywhere in your program.
It allows you to write the complete css styling in your JSX file and create the Named Components with css styling.

Lets understanding these thing with example -

Example 1 - Normal Styling

import React, { useState } from "react";
import styled, { css , keyframes } from "styled-components";

function App() {

  const Title = styled.h1`
    color: whitesmoke;
    background-color: darkslateblue;
    font-size: 2rem;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    text-align: center;
    &:hover {
      background-color: slateblue;
    }
  `;
returb (
  <Title>
  <h1>Hello</h1>
 </Title>
</div>
  );
}
export default App;

output -

• As you can see , we have creates a component named Title and then used the "styled" keyword with ".h1" meaning it belongs to styled components and the component we are styling is an "h1" tag
• We have used the backticks "" to represent the block of code for styled components as it is easy to use backticks when dealing with dynamic changes.
• Then we provide the styling as normal css and you can also see that we have use the hover property inside it using "&" symbol.
• Then we used the "Title" Component and inside it we have write the string Hello world.

Example 2 - Changing styling dynamically using hooks

import React, { useState } from "react";
import styled, { css , keyframes } from "styled-components";

function App() {
  const [display, setDisplay] = useState(false);

 const Title = styled.h1`
    color: whitesmoke;
    background-color: darkslateblue;
    font-size: 2rem;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    text-align: center;
    display: grid;
    grid-template-columns: ${display ? "repeat(2,1fr)" : 
                           "repeat(1,1fr)"};
  `;

const Button = styled.button`
    display: inline-block;
    color: palevioletred;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    display: block;
  `;

  const SideTitle = styled.h1`
    font-size: 1.5rem;
    color: white;
    text-align: center;
    display: ${display ? "block" : "none"};
    margin: 0.5em 0 0.7em 0;
  `;
returb (
  <Title>
  <h1>Hello</h1>
  <SideTitle>
    <form className='flex space-x-5'>
      <label>Search</label>
      <input type="text" name="name" placeholder='search...' 
           className='ring-2 ring-blue-400 rounded-lg 
           focus:outline-none px-4' />
    </form>
  </SideTitle>
 </Title>
</div>
  );
}
export default App;

Output -

• As you can see we have used an hook called "display" and set it's state to false initially.
• Then in the styling part we have used this display hook with "grid-template-columns" property of css , when the display hook is set to true , then there will be 2 columns in the element and when the display hook is set to false , there will be only 1 column in the element .
• Then we did the styling for a button and another component named SideTitle.
• Inside SideTitle styling , we have again used the display hook to change the display property of this element to dynamically.
• Then we have used our component inside componenet and inside it we have created a form with a label and an input fielt(The styling of input is done by tailwind css).
• Then we have created a button which will toggle the state of display hook between true and false.
• When the display hook is set to true , the form will be visible and when it is set to false , the form will be hidden.

Example 3 - Animation

import React from "react";
import styled, { keyframes } from "styled-components";

function App() {
  // Create the keyframes
  const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

  // Here we create a component that will rotate everything we pass in over two seconds
  const Rotate = styled.div`
    display: flex;
    animation: ${rotate} 2s linear infinite;
    padding: 2rem 1rem;
    font-size: 1.2rem;
    justify-content: center;
  `;

  return (
    <div>
      <Rotate>Animation</Rotate>
    </div>
  );
}

export default App;

Output -

• As you can see , we have used the keyframes word to create a keyframe named "rotate" for our animation.
• Then we have created a Rotate component and inside it we have used the css animation property and passed that "rotate" keyframe to this property.
• Then we have used that Rotate component and passed a text inside it which will animated according to the keyframes we have created above.

Documentation -

https://styled-components.com/docs

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h/edit

https://dev.to/shubhamtiwari909/arrow-function-in-javascript-46gd

https://dev.to/shubhamtiwari909/javascript-oop-2-inheritance--44c2