Create a React component - Multiselect
Create a responsive component React - Multiselect with search with special requirements for responsiveness
Initial data for filling the component list:
Country (This is a group/parent)
let countryList = [
{id: 1, name: 'Egypt'},
{id: 2, name: 'Turkey'}
];
Resorts (This is a nested element/children within the group)
let cityLists = [
{id: 4, name: 'Hurghada', country: 1},
{id: 5, name: 'Sharm El Sheikh', country: 1},
{id: 6, name: 'Alanya', country: 2},
{id: 7, name: 'Kemer', country: 2},
{id: 8, name: 'Marmaris', country: 2},
{id: 8, name: 'Dalaman', country: 2},
];
Component behavior on wide screens
The component will be embedded in a search form using React. Therefore, it should be completely independent of the environment.
This is how the search form will look on wide screens

Description of the component's work on a wide screen
1. Initial appearance when the page is opened

Clicking the mouse in the search line opens a form for selecting a country or resort under the component
let's call THIS FORM WRAPPER-DIV

This same form opens if we click the mouse on the dropdown button
i.e.

There are scroll bars on the left and right, allowing scrolling of the content
i.e. under the search window opens some <div> consisting of two others filled with lists
ul-->li, with the right one equipped with checkboxes
The behavior of the dropdown form on a wide screen is extremely simple
Clicking on a country in the left half (on the Country) changes the content of the right side (the content of the DIV with resorts)
Here are a few examples of the behavior of this "form"


Each "right" list starts with the checkbox "All resorts", clicking on which selects ALL in the right list or vice versa, deselects
By pressing the OK button we get an object with the country code and a list of selected resorts
[
{"country": 1}
{"city": [4,5]}
]
"country": - number, country code. Only one country can be selected!
"city" - array, separated by commas. Several resorts can be selected within the chosen country
When changing the country - the list of resorts is automatically replaced with the list of resorts of that country
If the checkbox "All resorts" is unchecked in the right list and OK is pressed, the output will be
[
{"country": 1}
{"city": [undefined]}
]
The button to open the search list works similarly to the OK button
This means that if we have made a selection of resorts or a country, then to remember the selection we just need to either press OK or simply close the list by clicking anywhere
1.1 The component allows searching within itself. The search is performed immediately for both the country and the resort
The output of the search results looks as follows
if no country is found - then the list of found resorts is displayed immediately

If a country is found, it is displayed first in the COUNTRY group list.
And below, in the list of the RESORTS group, the subordinate resorts are displayed

Clicking on the found country opens the familiar form where we can select resorts

Clicking on a resort immediately forms the result and closes the selection form
The result displayed in the search window after the manipulations is as follows
Country, n resort(s)
For example, if I selected Hurghada (This is Egypt), it looks like this

FOR MOBILE
Initial view of the component

when clicking on the component
opens a modal WRAPPER-DIV FOR THE FULL SCREEN OF THE MOBILE

CLICK ON THE COUNTRY AND A div WITH resort checkboxes OPENS

At the bottom, the OK button turns into two

A panel appears at the top with a button - cross
The cross button, the Cancel button, and the Apply button perform the same function - remember what is selected and close the modal window, while also calculating the number of selected resorts
The search works in the mobile application as follows
I enter some text and, for example, a country is found

The found countries are in the "COUNTRIES" group. The group cannot be clicked - it is inactive. You can only click on the country name. Each resort, separated by commas, has the name of its country
In this case, this window opens

Clicking on a resort and we get the result

Modal windows close, and the result of our selection goes into a variable
[
{"country": 1}
{"city": [4]}
]
There are no requirements for CSS regarding fonts, etc.
The main requirement is the functionality of the component.
IMPORTANT when developing not to name the component App or Root
Props
countryList and cityLists should be placed in json files
output of the component through default export
Client's review of cooperation with Inna Timoshenko
Create a React component - MultiselectWonderful performer! I recommend! Responsible, calm, perfectly understands what the client needs! Understands the brief at a glance! Very polite and responsible! This is the first time I meet such a freelancer with such a level of knowledge and speed of work!
Freelancer's review of cooperation with Dmitry Turkin
Create a React component - MultiselectIt is comfortable to work with Dmytro. Clear and detailed task description, quick to respond to any questions, pleasant to communicate with. I recommend!
-
310 I will perform the search implementation qualitatively. I have done search on React, attaching it below.
https://freelancehunt.com/showcase/work/sayt-full-stack-reactjs-node-mongodb-express/1889361.html
-
7581 13 0 I will do it without any problems in the best way in a couple of hours, I will be happy to receive a response.
-
610 9 0 I can integrate https://ant.design/components/cascader#cascader-demo-multiple or https://cascader-react-component.vercel.app/demo/multiple
Looks like what you need.
Write to me in private messages.
Current freelance projects in the category Javascript and Typescript
Full-stack development — Amazon PPC Dashboard (Stage 1)Need a full-stack developer with experience working with Amazon API to implement Stage 1 of the internal PPC dashboard. The project is real, the data is live, everything is ready to start. Frontend prototype (5 pages, React + TypeScript): WHAT IS ALREADY READY — Frontend… Javascript and Typescript, Web Programming ∙ 17 hours 41 minutes back ∙ 21 proposals |
Development of a photo book and photo frame constructor websiteProject Goal A modern website needs to be developed for ordering photo books, photo frames, and other personalized photo products. The main task of the project is to provide the client with the ability to independently create a ready-made layout of the product directly on the… Javascript and Typescript, Web Programming ∙ 2 days 9 hours back ∙ 93 proposals |
Full-stack developmentNeed a full-stack developer who is free for work and not looking to get rich immediately from this project. This is my test site: readyhome.ge the prototype of which I want to create (not referring to design). In the footer, there is Russian language, fill out the questionnaire… Javascript and Typescript, Web Programming ∙ 2 days 22 hours back ∙ 80 proposals |
Team for a custom marketplace of funeral services.We are looking for a team to launch and develop a custom national marketplace for funeral services. Right away: we are not looking for solo freelancers, juniors, or "website builders." We need a strong product team at the middle+/senior level with real cases in… Javascript and Typescript, Web Programming ∙ 3 days 4 hours back ∙ 26 proposals |
Improvement of the existing Next.js/Supabase project: offers, CRM, analytics, AI chatThere is an active project WatchGenius — a luxury watch analytics platform with a catalog of models, price analytics, external offers, application forms, and an AI chat. The project has already been partially developed. We need not a website from scratch, but an experienced… Javascript and Typescript, Web Programming ∙ 5 days 5 hours back ∙ 55 proposals |