Libraries i used for this mini project:
- Styled-Components
- Create-React-App
if you want to use CSS-in-JS and you don't know how to use styled-components with React i hope you will get enough knowledge of basics to start using it.
we will learn by creating a simple LoginIn form (without validation stuff) using style components in CRA.
Lets start with installation:
open your terminal and write:
npm install --save -g styled-components
Here is our first example of an variable div that will display label and input in CRA:
fileName: StyledForm.jsx
import styled from "styled-components" //now below style a parent div as a variable and name it //Note: always use Pascal Case for Naming Styled Components //we use styled.variableType to create a variable const ParentForm = styled.form` display: grid; grid-template-columns;1fr; grid-template-rows:auto; border: 1px solid Black; margin: auto; *{ margin: auto; padding: 0.5rem 1rem; display:grid } `; // don't export default anything from styled components file export {ParentForm}
Alright here we created our first styled variable that is Parent div for the Signin form.
Lets now create main Form component.
Filename: Form.jsx
import React from "react"; //create a stateful class class Form extends React.Component {}
Now we import ParentForm we created in StyledForm.jsx.
import React from "react";import { ParentForm } from "../StyledForm.jsx"; //create a stateful class class Form extends React.Component {}
now we will create a render function in that we will return this component.
import React from "react";import { ParentForm } from "../StyledForm.jsx"; //create a stateful class class Form extends React.Component { render(){ return Here we will add form labels and inputs } }
But wait what if you have to add same template n number of times ?
for efficiency we will create a function that will take all the elements of form
as an argument and return us the template html.
import React from "react";import { ParentForm } from "../StyledForm.jsx"; //create a stateful class class Form extends React.Component { render(){ const functionalDiv = (id, type, placeHolder) => { return ( {id} ); }; return Here we will add form labels and inputs } }
now lets add our rest of components:
import React from "react"; import { ParentForm } from "../StyledForm.jsx"; //create a stateful class class Form extends React.Component { render(){ const functionalDiv = (id, type, placeHolder) => { return ( {id} ); }; return ( <>Please SignIn to Access Your Account.
{functionalDiv("username", "text", "enter username")} {functionalDiv("password", "password", "enter password")} alert("Successfully Logged in ")} > Submit > ) } }
Now create an onSubmit Stylebutton that will prevent the whole page from refreshing.
const onSubmit=e=>{ e.preventDefault() }Now we will create the remaining styling for the form and export them.
import styled from "styled-components"; const ParentForm = styled.form` display: grid; grid-template-columns;1fr; grid-template-rows:auto; border: 1px solid Black; margin: auto; *{ margin: auto; padding: 0.5rem 1rem; display:grid } `; const HeaderForm = styled.div` > p { font-size: 1.5em; font-weight: 600; } `; const FormMainBody = styled.div` grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; margin: auto; label { text-align: left; text-transform: uppercase; font-weight: 600; } input { border: 1px solid Black; padding: 5px 10px; caret-color: green; } `; const StyleButton = styled.Stylebutton` padding: 5px 20px; color: white; background-color: ${props => [props.bgcolor]}; `; export { ParentForm, HeaderForm, FormMainBody, StyleButton };
Here is the final Form.js file:
import React from "react"; import { ParentForm, HeaderForm, FormMainBody, StyleButton } from "../StyledForm.jsx"; class Form extends React.Component { render() { const functionalDiv = (id, type, placeHolder) => { return ( {id} ); }; const onSubmit = e => { e.preventDefault(); }; return (Please SignIn to Access Your Account.
{functionalDiv("username", "text", "enter username")} {functionalDiv("password", "password", "enter password")} alert("Successfully Logged in ")} > Submit ); } } export default Form;
That's it that's how we created a simple login in form using styled-components.
here is the codesandbox link :here
If you get any questions regarding this DM me on Twitter.
Top comments (0)