#reactjs developer
Explore tagged Tumblr posts
Text
How to Choose the Right ReactJS Development Company in India 🇮🇳🚀
ReactJS has become one of the most popular JavaScript libraries for building dynamic, high-performance web applications. Businesses worldwide are leveraging its power to create seamless user experiences. If you're looking to build a robust web solution, hiring the right ReactJS development company in India can make all the difference. But with so many options, how do you choose the best one? 🤔
This guide will walk you through the key factors to consider when selecting a ReactJS development company that aligns with your business needs.
🎯 Why Hire a ReactJS Development Company in India?
India has become a global hub for software development, and for good reasons:
✅ Cost-Effectiveness – High-quality development at competitive prices. ✅ Skilled Talent Pool – Access to experienced React developers for hire with strong technical expertise. ✅ Time Zone Advantage – 24/7 development cycles for faster project delivery. ✅ Proven Track Record – Many Indian companies have successfully delivered global projects.
With these advantages, choosing a ReactJS development company in India can be a smart move for your business. Now, let’s look at the steps to pick the right one.
🏆 Step 1: Define Your Project Requirements
Before you start your search, clearly outline your project needs. Consider:
🔹 The type of application (eCommerce, SaaS, enterprise, etc.) 🔹 Core functionalities and features 🔹 Budget and timeline 🔹 The level of expertise required
Having a well-defined scope will help you filter out companies that don’t match your expectations.
🔍 Step 2: Research and Shortlist Companies
Once you know what you need, start looking for top ReactJS development companies in India. Use:
✔ Google Search & Directories – Platforms like Clutch, GoodFirms, and Upwork list verified companies. ✔ Company Websites – Check portfolios, services, and case studies. ✔ Client Reviews – Read testimonials on LinkedIn, Glassdoor, and review sites. ✔ Referrals – Ask for recommendations from industry peers.
Shortlist 3-5 companies that align with your requirements and have positive client feedback.
🏗️ Step 3: Evaluate Technical Expertise & Experience
Your ReactJS development partner should have a strong technical foundation. Assess their:
🎯 ReactJS Skills – Mastery of React components, Redux, hooks, and state management. 🎯 Full-Stack Expertise – Knowledge of Node.js, MongoDB, and APIs for end-to-end development. 🎯 UI/UX Proficiency – Ability to create user-friendly, responsive designs. 🎯 Performance Optimization – Techniques to ensure speed and efficiency. 🎯 Testing & Security – Familiarity with Jest, Cypress, and security best practices.
Check their GitHub repositories, open-source contributions, and previously developed projects.
💬 Step 4: Assess Communication & Project Management
Effective collaboration is key to a successful project. Make sure the company offers:
✅ Clear Communication – English proficiency and regular updates via email, Slack, or Zoom. ✅ Agile Development Approach – Sprint-based development for faster iterations. ✅ Project Management Tools – Use of Jira, Trello, or Asana to track progress. ✅ Dedicated Team Structure – Availability of project managers, developers, and testers.
A company with structured workflows will ensure smooth execution and timely delivery.
💰 Step 5: Compare Pricing & Engagement Models
Different companies offer various pricing models:
💵 Fixed Price Model – Best for small, well-defined projects. 💵 Time & Material Model – Suitable for projects with evolving requirements. 💵 Dedicated Team Model – Ideal for long-term collaboration and full-time engagement.
If you need ongoing support, hiring a dedicated React developer for hire might be the best option. Compare pricing structures and select the one that fits your budget.
✅ Step 6: Request a Trial Project
Before finalizing your choice, ask for a pilot project or paid trial. This helps you evaluate:
🔹 Code quality and best practices 🏗️ 🔹 Ability to meet deadlines ⏳ 🔹 Problem-solving skills 🧠 🔹 Communication and collaboration 🤝
If the company delivers a solid trial project, it’s a good indication of their capabilities.
🔥 Step 7: Check Post-Development Support
A reliable ReactJS development company in India should provide:
✔ Bug Fixes & Updates – Quick resolution of issues after deployment. ✔ Maintenance Services – Regular updates for security and performance. ✔ Scalability Options – Support for future enhancements and expansions.
Having a long-term tech partner ensures your web application remains up-to-date and optimized.
🚀 Final Thoughts
Choosing the right ReactJS development company in India requires careful research and evaluation. By following this step-by-step guide, you can find a trusted partner who understands your business needs and delivers high-quality ReactJS solutions.
💡 Need a React developer for hire or a dedicated team for your next project? Get in touch with the best experts today and build a high-performing ReactJS application!
#reactjs developer#react developers#react developer#reactjs development company in india#react.js developer#reactjs developers#react developer for hire#react development outsourcing#react js developers
0 notes
Text
Leverage advanced ReactJS web development services to build dynamic, high-performance web applications tailored to your business needs. Our custom solutions empower businesses with scalable, efficient, and user-friendly interfaces designed to enhance user experiences and drive growth. With expertise in ReactJS, we deliver seamless integrations, robust architecture, and innovative features that align with your goals. Get in touch to transform your digital presence with solutions that set you apart in a competitive landscape.
#reactjs developers#react developer for hire#react development outsourcing#react js developers#react js developers for hire#react js developer#reactjs developer for hire#react js development company in india#reactjs development company india#reactjs developer#react developers#what is a react developer#react js ui developer#reactjs web development services
0 notes
Text
Hire React js Developer
#ReactJS Developer#Hire React Developer#React Frontend Developer#React Engineer#Frontend Development#JavaScript Developer#Web Developer#Frontend Engineer#React Programmer#UI/UX Developer#React.js#JavaScript
1 note
·
View note
Text
0 notes
Text
11 Best Reactjs Development Companies in Australia
ReactJS, the open-source JavaScript library, has become a cornerstone of modern web development. Renowned for its speed, flexibility, and robust community, ReactJS empowers developers to build user-friendly and interactive web interfaces.
1 note
·
View note
Text
Hire top-notch ReactJS Developers. Looking to power your web applications with cutting-edge technology? Codeflash Infotech offers skilled ReactJS developers to take your projects to the next level. Our team is proficient in harnessing ReactJS's power to build dynamic and responsive user interfaces that deliver exceptional user experiences. From custom component development to seamless integration with backend systems, our developers excel at leveraging ReactJS's flexibility and efficiency.
0 notes
Text
Ultimate Guide for Hiring ReactJS Freelancers: Top Websites and Expert Tips
In today's fast-paced digital world, ReactJS has emerged as one of the most popular JavaScript libraries for building user interfaces. With its flexibility, scalability, and reusability, ReactJS has become the go-to choice for many businesses and developers alike. However, finding the right ReactJS freelancer for your project can be a challenging task. This comprehensive guide will provide you with valuable insights, top websites, and expert tips to streamline the process of hiring ReactJS freelancers.
Assessing Your Project Requirements: Before diving into the hiring process, it's crucial to clearly define your project requirements. This includes understanding the scope, timeline, budget, and specific skills needed for your ReactJS project. A well-defined project brief will help you attract the right freelancers and ensure a successful collaboration.
Identifying the Right Platform: When it comes to hiring ReactJS developers, several online platforms specialize in connecting clients with top talent. Here are some of the most reputable platforms worth considering:
a. Upwork: Upwork is one of the largest freelancing platforms, offering a wide range of skilled ReactJS developers. The platform provides various features like ratings, reviews, and work history to help you make an informed decision.
b. Freelancer: Freelancer is another popular platform that allows you to post your project and receive bids from ReactJS freelancers. You can review freelancers' portfolios, ratings, and feedback from previous clients before making a selection.
c. Toptal: Toptal is known for its rigorous screening process, ensuring you connect with top-tier ReactJS freelancers. The platform handpicks talent based on their technical expertise and project experience, guaranteeing high-quality professionals.
d. Guru: Guru is a user-friendly platform that lets you post job requirements and receive proposals from ReactJS freelancers. The platform offers transparency by providing detailed profiles, work samples, and reviews.
Evaluating Freelancer Profiles: Once you've shortlisted potential candidates, it's essential to thoroughly evaluate their profiles. Look for the following aspects:
a. Portfolio: Review their past projects to assess their ReactJS expertise, design skills, and overall quality of work. A diverse and relevant portfolio is a positive sign.
b. Ratings and Reviews: Take into account the feedback provided by previous clients. Look for consistent positive ratings and reviews, indicating reliability and professionalism.
c. Skill Set: Ensure that the freelancer possesses the necessary ReactJS skills required for your project. Look for experience with related technologies, such as Redux, TypeScript, or GraphQL, if applicable.
d. Communication and Availability: Effective communication is vital for successful collaboration. Assess their responsiveness, language proficiency, and availability to ensure smooth coordination throughout the project.
Conducting Interviews and Assessments: After shortlisting candidates based on their profiles, it's essential to conduct interviews and assessments to gauge their technical skills and suitability for your project. Here are some strategies to consider:
a. Technical Interview: Prepare a set of relevant technical questions and scenarios to assess the candidate's ReactJS knowledge and problem-solving abilities. This could include questions about component lifecycle, state management, or performance optimization.
b. Test Projects: Assign a small ReactJS-related task or project to evaluate the candidate's coding style, adherence to best practices, and ability to deliver within deadlines.
c. Communication Assessment: Evaluate the candidate's ability to articulate ideas, understand your project requirements, and provide feedback during the interview process.
Setting Clear Expectations and Agreements: Before finalizing the hiring process, ensure that all expectations, deliverables, and timelines are clearly communicated to the selected freelancer. A well-defined contract or agreement protects both parties and sets the groundwork for a successful working relationship. Consider including the following elements in your agreement:
a. Project Scope: Clearly outline the scope of work, including specific tasks, features, and deliverables expected from the freelancer. This will help avoid misunderstandings later on.
b. Timeline and Milestones: Set realistic deadlines and milestones for different phases of the project. Break down the work into manageable chunks to track progress effectively.
c. Communication Channels: Determine the preferred communication channels for regular updates, feedback, and collaboration. Whether it's email, project management tools, or video conferencing, establishing effective lines of communication is crucial.
d. Payment Terms: Specify the agreed-upon payment terms, including the total project cost, payment schedule, and method of payment. It's advisable to set milestones tied to payments to ensure transparency and accountability.
e. Intellectual Property Rights: Clearly define the ownership of the project's intellectual property rights. Determine whether the freelancer will retain any rights or if all rights will be transferred to you upon project completion.
Managing the Collaboration: Once you have hired a ReactJS freelancer, it's essential to manage the collaboration effectively to ensure project success. Here are some tips to foster a productive working relationship:
a. Regular Updates: Establish a schedule for progress updates and check-ins to keep track of the freelancer's work. This will allow you to address any issues or concerns promptly.
b. Feedback and Communication: Provide constructive feedback on the freelancer's work to ensure alignment with your expectations. Encourage open communication and address any questions or clarifications promptly.
c. Project Management Tools: Utilize project management tools like Trello, Asana, or Jira to track tasks, milestones, and project progress. These tools help streamline communication and ensure transparency.
d. Flexibility and Collaboration: Foster a collaborative environment where both you and the freelancer can contribute ideas, suggestions, and improvements. Be open to incorporating their expertise and suggestions into the project.
e. Regular Payments: Adhere to the agreed-upon payment schedule and release payments promptly upon completion of milestones. This demonstrates professionalism and helps maintain a positive working relationship.
Conclusion:
Hiring the right ReactJS freelancer is crucial for the success of your project. By following this ultimate guide, you can streamline the hiring process and increase your chances of finding a skilled ReactJS freelancer who aligns with your project requirements. Remember to assess their profiles, conduct thorough interviews and assessments, and establish clear expectations and agreements. Effective collaboration and communication throughout the project will help ensure a successful outcome. With the right ReactJS freelancer by your side, you can bring your vision to life and create remarkable web applications with ReactJS.
Reference:
0 notes
Text
JavaScript Fundamentals
I have recently completed a course that extensively covered the foundational principles of JavaScript, and I'm here to provide you with a concise overview. This post will enable you to grasp the fundamental concepts without the need to enroll in the course.
Prerequisites: Fundamental HTML Comprehension
Before delving into JavaScript, it is imperative to possess a basic understanding of HTML. Knowledge of CSS, while beneficial, is not mandatory, as it primarily pertains to the visual aspects of web pages.
Manipulating HTML Text with JavaScript
When it comes to modifying text using JavaScript, the innerHTML function is the go-to tool. Let's break down the process step by step:
Initiate the process by selecting the HTML element whose text you intend to modify. This selection can be accomplished by employing various DOM (Document Object Model) element selection methods offered by JavaScript ( I'll talk about them in a second )
Optionally, you can store the selected element in a variable (we'll get into variables shortly).
Employ the innerHTML function to substitute the existing text with your desired content.
Element Selection: IDs or Classes
You have the opportunity to enhance your element selection by assigning either an ID or a class:
Assigning an ID:
To uniquely identify an element, the .getElementById() function is your go-to choice. Here's an example in HTML and JavaScript:
HTML:
<button id="btnSearch">Search</button>
JavaScript:
document.getElementById("btnSearch").innerHTML = "Not working";
This code snippet will alter the text within the button from "Search" to "Not working."
Assigning a Class:
For broader selections of elements, you can assign a class and use the .querySelector() function. Keep in mind that this method can select multiple elements, in contrast to .getElementById(), which typically focuses on a single element and is more commonly used.
Variables
Let's keep it simple: What's a variable? Well, think of it as a container where you can put different things—these things could be numbers, words, characters, or even true/false values. These various types of stuff that you can store in a variable are called DATA TYPES.
Now, some programming languages are pretty strict about mentioning these data types. Take C and C++, for instance; they're what we call "Typed" languages, and they really care about knowing the data type.
But here's where JavaScript stands out: When you create a variable in JavaScript, you don't have to specify its data type or anything like that. JavaScript is pretty laid-back when it comes to data types.
So, how do you make a variable in JavaScript?
There are three main keywords you need to know: var, let, and const.
But if you're just starting out, here's what you need to know :
const: Use this when you want your variable to stay the same, not change. It's like a constant, as the name suggests.
var and let: These are the ones you use when you're planning to change the value stored in the variable as your program runs.
Note that var is rarely used nowadays
Check this out:
let Variable1 = 3; var Variable2 = "This is a string"; const Variable3 = true;
Notice how we can store all sorts of stuff without worrying about declaring their types in JavaScript. It's one of the reasons JavaScript is a popular choice for beginners.
Arrays
Arrays are a basically just a group of variables stored in one container ( A container is what ? a variable , So an array is also just a variable ) , now again since JavaScript is easy with datatypes it is not considered an error to store variables of different datatypeslet
for example :
myArray = [1 , 2, 4 , "Name"];
Objects in JavaScript
Objects play a significant role, especially in the world of OOP : object-oriented programming (which we'll talk about in another post). For now, let's focus on understanding what objects are and how they mirror real-world objects.
In our everyday world, objects possess characteristics or properties. Take a car, for instance; it boasts attributes like its color, speed rate, and make.
So, how do we represent a car in JavaScript? A regular variable won't quite cut it, and neither will an array. The answer lies in using an object.
const Car = { color: "red", speedRate: "200km", make: "Range Rover" };
In this example, we've encapsulated the car's properties within an object called Car. This structure is not only intuitive but also aligns with how real-world objects are conceptualized and represented in JavaScript.
Variable Scope
There are three variable scopes : global scope, local scope, and function scope. Let's break it down in plain terms.
Global Scope: Think of global scope as the wild west of variables. When you declare a variable here, it's like planting a flag that says, "I'm available everywhere in the code!" No need for any special enclosures or curly braces.
Local Scope: Picture local scope as a cozy room with its own rules. When you create a variable inside a pair of curly braces, like this:
//Not here { const Variable1 = true; //Variable1 can only be used here } //Neither here
Variable1 becomes a room-bound secret. You can't use it anywhere else in the code
Function Scope: When you declare a variable inside a function (don't worry, we'll cover functions soon), it's a member of an exclusive group. This means you can only name-drop it within that function. .
So, variable scope is all about where you place your variables and where they're allowed to be used.
Adding in user input
To capture user input in JavaScript, you can use various methods and techniques depending on the context, such as web forms, text fields, or command-line interfaces.We’ll only talk for now about HTML forms
HTML Forms:
You can create HTML forms using the <;form> element and capture user input using various input elements like text fields, radio buttons, checkboxes, and more.
JavaScript can then be used to access and process the user's input.
Functions in JavaScript
Think of a function as a helpful individual with a specific task. Whenever you need that task performed in your code, you simply call upon this capable "person" to get the job done.
Declaring a Function: Declaring a function is straightforward. You define it like this:
function functionName() { // The code that defines what the function does goes here }
Then, when you need the function to carry out its task, you call it by name:
functionName();
Using Functions in HTML: Functions are often used in HTML to handle events. But what exactly is an event? It's when a user interacts with something on a web page, like clicking a button, following a link, or interacting with an image.
Event Handling: JavaScript helps us determine what should happen when a user interacts with elements on a webpage. Here's how you might use it:
HTML:
<button onclick="FunctionName()" id="btnEvent">Click me</button>
JavaScript:
function FunctionName() { var toHandle = document.getElementById("btnEvent"); // Once I've identified my button, I can specify how to handle the click event here }
In this example, when the user clicks the "Click me" button, the JavaScript function FunctionName() is called, and you can specify how to handle that event within the function.
Arrow functions : is a type of functions that was introduced in ES6, you can read more about it in the link below
If Statements
These simple constructs come into play in your code, no matter how advanced your projects become.
If Statements Demystified: Let's break it down. "If" is precisely what it sounds like: if something holds true, then do something. You define a condition within parentheses, and if that condition evaluates to true, the code enclosed in curly braces executes.
If statements are your go-to tool for handling various scenarios, including error management, addressing specific cases, and more.
Writing an If Statement:
if (Variable === "help") { console.log("Send help"); // The console.log() function outputs information to the console }
In this example, if the condition inside the parentheses (in this case, checking if the Variable is equal to "help") is true, the code within the curly braces gets executed.
Else and Else If Statements
Else: When the "if" condition is not met, the "else" part kicks in. It serves as a safety net, ensuring your program doesn't break and allowing you to specify what should happen in such cases.
Else If: Now, what if you need to check for a particular condition within a series of possibilities? That's where "else if" steps in. It allows you to examine and handle specific cases that require unique treatment.
Styling Elements with JavaScript
This is the beginner-friendly approach to changing the style of elements in JavaScript. It involves selecting an element using its ID or class, then making use of the .style.property method to set the desired styling property.
Example:
Let's say you have an HTML button with the ID "myButton," and you want to change its background color to red using JavaScript. Here's how you can do it:
HTML: <button id="myButton">Click me</button>
JavaScript:
// Select the button element by its ID const buttonElement = document.getElementById("myButton"); // Change the background color property buttonElement.style.backgroundColor = "red";
In this example, we first select the button element by its ID using document.getElementById("myButton"). Then, we use .style.backgroundColor to set the background color property of the button to "red." This straightforward approach allows you to dynamically change the style of HTML elements using JavaScript.
#studyblr#code#codeblr#css#html#javascript#java development company#python#study#progblr#programming#studying#comp sci#web design#web developers#web development#website design#ui ux design#reactjs#webdev#website#tech
397 notes
·
View notes
Text
We’re excited to introduce Vibe Checks for the Praxis website, inspired by the process we’ve developed in our Discord server. With this new feature in place, new members will be able to answer a list of community decided questions, ensuring a safe and respectful environment for all who join the website.
Here’s how it works: Vibe checkers, selected by the community, read over the answers and engage with new members in their respective questionnaire tickets, which are automatically generated upon joining. If enough vibe checkers vote in favor of verifying a new member, they are automatically verified and receive a welcome notification.
With Vibe Checks implemented, we're now able to safely share invite links to the website far outside our Discord server. Whether you're a longtime community member or a newcomer looking to contribute, we welcome you to join us in this early round of testing and QA.
Join the project: https://praxis-app.org/i/4efdc9de
#open source#free software#software#praxis#foss#developers#programming#design#typescript#reactjs#nodejs
50 notes
·
View notes
Text
#reactjs developers#react developer for hire#react development outsourcing#react js developers#react js developers for hire#react js developer#reactjs developer for hire#react js development company in india#reactjs development company india#reactjs developer
0 notes
Text


another day, another cat
today i finished the homework for week 1 of the react course and i had to "recode" the weather app into react components and it was pretty cool.
have a good weekend!
#codeblr#programming#web development#codenewbie#studyblr#coding#webdev#progblr#shecodes#reactjs#react#mine
48 notes
·
View notes
Text
Finally got OAuth working!!!!
The war is over. Figured out the hard way that OAuth makes the routes for you <3
Now I can start coming up with models to store the data from users. If anyone has any ideas on how I should make those relationships with other data tables for songs and artists let me know. I’m going to reblog this post with some of my own ideas.
I also have a login page and dashboard with hard coded data to get a sense of what I want the backend to supply. Good progress! Will also reblog with pictures of that.
#coding#software engineering#baby coder#web developers#web development#nodejs#ruby#spotify api#reactjs#ruby on rails#software development#full stack developer
4 notes
·
View notes
Text
I'm a Web developer
Hello, my name is Bettina and i'm 27 years old. I live in Sweden 🇸🇪 but i'm born in Hungary 🇭🇺.
I'm currently studying web development focusing e-commerce. I've done it for a year now and i have one year left in school. I have not had my internship yet.
The languages i'm learning:
HTML
CSS
JavaScript, React.js, Node.js, expess.js,
MySQL, PHP.
I've even experience UX-design, web design, digital marketing, SEO and entrepreneurship. And i love talking about problem solving and accessibility 🪄🪲
Currently i'm developing wordpress with PHP, HTML and hierarchical CSS.
So, if you are into this stuff, especially wordpress and php, talk nerdy stuff with me! I would be so happy if i had more connections with people who are into this stuff, especially women. 🌸
My github:
My portfolio:
It is not done yet, i will update it soon 🫣🐢
🌦️ A weather app made in our Javascript course:
#web developer#webdeveloer#web developers#website#web design#web development#tiikiboo#frontenddevelopment#frontend#backend#php#phpdevelopment#php developers#php programming#php training#html css#javascript#reactjs#wordpress ecommerce#wordpress#wordpress php#wordpress development#portfolio#developer#juinor#women in tech#tech#codeblr#code#programming
36 notes
·
View notes
Text
Any MCR fans in software engineering/web dev?
I'm looking for mutuals who love to code and also love MCR. I wanna do a little project >:D also just want some buds to relate to.

#my chemical romance#mcr#software engineering#web development#web developers#python#c++ programming#programming#programmer#github#coding#baby coder#codeblr#react#java#javascript#reactjs#frontenddevelopment#learntocode#webdev#nodejs#full stack developer#gerard way#frank iero#my chem gerard#mikey way#ray toro
2 notes
·
View notes
Text
Wheeewww what a week!! I started to learn React and lemme tell you...it hasn't been easy due to my own silliness . I had already tried to learn it earlier last year and I thought I had still retained most of the concepts I needed to start beginners' tutorials ( ignore the gross overestimation of my capabilities) . Boy was I wrong......
So after watching hundreds of tutorials (okay maybe just three hehe.....), I decided to relearn React. Which was really the best thing to do, because I feel clearer in my head now (*ᵕᴗᵕ)⁾⁾.
While I was stressing with React, I decied to learn HTML Canvas as a way to cool off, because aside scrolling through Pinterest, I have zero relaxing hobbies; they're all so active! Okay that's a lie, I read. I'm currently reading David Copperfield but I've got to a particularly sad part and I really can't continue ಥ﹏ಥ. So HTML Canvas came in to save the day. It's really really fun and I love love love bouncing balls.
I followed a YT tutorial by Chris Courses. He has a playlist on the topic which is sooo useful. 10/10 will recommend!
Oh yes, before I forget, here is the link to the React tutorial I'm currently following.The course is on Scrimba but I preferred to follow it locally. I'm old school like that.
Wish me luck everyone.Love love love ⸜(。˃ ᵕ ˂ )⸝♡⸜(。˃ ᵕ ˂ )⸝
꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒦꒷꒷꒦꒷꒷꒦꒷
PS : Anyone have any good classics recommendations? I'm tryna become 'cultivated and well read'. And no, not just 'Western' literature. Stories from all over the world would be greatly appreciated 𓆩♡𓆪.
#codeblr#programming#web development#frontend#html#progblr#css#coding#technology#tech#code#dark academia#light academia#literature#reactjs#javascript
14 notes
·
View notes
Text
let today = new Date("12 December 2023");
Hey coders!
The past couple of months I've been a frontend developer intern at an e-sports company and it's been so amazing! I am realizing that yeah, this is exactly what I want to do! I feel super lucky.
Anyway, today, and for the past like week, I have been struggling with implementing the multiselect from react-select in a form we are building in my team. It's a very complicated field, where you can choose from different lists, with values that need to be replaced and disabled depending on which list you are choosing from and what has already been chosen, so just getting the logic right was tough.
Today I got it working, only to realize I can't style it without all the functionality breaking. Feeling like I've tried everything, I was like: you know what? Fuck it, I'm just gonna make my own. Sooo here I am!
This is the inspo (from react-select):
And this is how far I've gotten(using our on-brand styles):
Anddd here's my (non funcitoning) code:
To break it down:
I have a div that contains a span (which will be rendered from an array of options, to be the yellow chip) and an invisible input field
The div is styled to look like an input field, but in reality it's just a div with spans and an invisible input field following the span (lol special thanks to this stack overflow thread)
When the user types, I am listening to what keys they are pressing with a function I am currently calling handleReturn
If the pressed key is "Enter", I will push the current value of the field to the options array
But! This does not do anything at the moment, since the options array does not tell the component to update itself in any way to display the newly added value! For that, I need to make the options array be a state using the useState() hook from React!
When a state is changed, react's useState can tell, and it will rerender (=update) the component, and then my new value will (...should) be shown as well, since it will be using the new array with new values!
Stay tuned for updates(:
#codeblr#react.js#react#reactjs#frontend#frontend developer#web development#compsci#stem#woman in stem#coding#programming#css#html#javascript#js#software engineering#typescript
17 notes
·
View notes