Code menu tabs in react and create react component with hooks an tsx
Budget: $10 – $30 USD
Some relevant hints and used technologies: React.js (functional base - hooks) only - No JQuerry.
Read everything carefully. Only provide a bid if you are really able and experienced enough to meet the described requirements.
Please code a React component menu tab component for me like the frontend component seen in the screenshot attached.
See it live here https://www.jsdelivr.com/ .
Always use functional components, so hooks..., where relevant and needed.
It must 100% work and look similar. Also consider following points.
Some important criteria to take care of:
1 Must be responsive - exact as on https://www.jsdelivr.com/
2 Use styled-components only ( https://styled-components.com/ ) to implement same design like border shaddow, transition, ... No transition package, only plain styled-component css.
3 Add a js object to add ability to make changes so that Tabs change automatically from top to bottom via boolean. Additionally, add timing of change of menu buttons must be same. For example:
const settings = { automaticChange: true, duration: 2000 }
4 Change must stop if click on a menu button
5 Take care of same hover effects
6 Data like text, menu logos, html/tsx content must be served/structured via js array within the component
For example:
const content = [{ tabLogo: png1, tabContent: tab1 }, { ... }, { ... }]
7 Only Typescript. No JSX
Some further conditions of the project as a result of my experiences here on freelancer:
Everything must work properly is a react app. Only then I release the entire sum at once.
We can also use anydesk or teamviewer where you can directly check and work in case it does not work on my machine. Use latest packages, not old versions.
I do not use create-react-app; I implemented an own react biotop with babel and webpack.
In case of questions, I can ask you, you can ask me, too.
NO Scammers and NO bargaining and No Asking for tip after contract approval or project finalization!
Only efficient TSX solution with the smallest possible performance need. No complicated solutions, or workarounds, no spaghetti code.
No JQuery. No further packages if not needed or wanted.
All indications without engagement, subject to small modifications.
Read everything carefully. Only provide a bid if you are really able and experienced enough to meet the described requirements.
Please code a React component menu tab component for me like the frontend component seen in the screenshot attached.
See it live here https://www.jsdelivr.com/ .
Always use functional components, so hooks..., where relevant and needed.
It must 100% work and look similar. Also consider following points.
Some important criteria to take care of:
1 Must be responsive - exact as on https://www.jsdelivr.com/
2 Use styled-components only ( https://styled-components.com/ ) to implement same design like border shaddow, transition, ... No transition package, only plain styled-component css.
3 Add a js object to add ability to make changes so that Tabs change automatically from top to bottom via boolean. Additionally, add timing of change of menu buttons must be same. For example:
const settings = { automaticChange: true, duration: 2000 }
4 Change must stop if click on a menu button
5 Take care of same hover effects
6 Data like text, menu logos, html/tsx content must be served/structured via js array within the component
For example:
const content = [{ tabLogo: png1, tabContent: tab1 }, { ... }, { ... }]
7 Only Typescript. No JSX
Some further conditions of the project as a result of my experiences here on freelancer:
Everything must work properly is a react app. Only then I release the entire sum at once.
We can also use anydesk or teamviewer where you can directly check and work in case it does not work on my machine. Use latest packages, not old versions.
I do not use create-react-app; I implemented an own react biotop with babel and webpack.
In case of questions, I can ask you, you can ask me, too.
NO Scammers and NO bargaining and No Asking for tip after contract approval or project finalization!
Only efficient TSX solution with the smallest possible performance need. No complicated solutions, or workarounds, no spaghetti code.
No JQuery. No further packages if not needed or wanted.
All indications without engagement, subject to small modifications.