Shelf selector (Inspired Arc icon selector)

This content originally appeared on DEV Community and was authored by Alain Di Fabio

This component is inspired by how Arc makes you choose its app icon. 🖥 Watch the demo video to see the component live in action!

⚡️ TECHNOLOGIES

• React
• Tailwind CSS
• Typescript ⚙️ HOW IT WORKS

const items = [
{
  src: '/images/arc-icon/1.png',
},
{
  src: '/images/arc-icon/2.png',
},
...
]

<ADFSchelfSelector
  className="w-full max-w-lg"
  selected={selectedIndex}
  onSelect={(index) => setSelectedIndex(index)}
  items={items}
/>

Change color indicator or sides fade color with:

<ADFSchelfSelector
   ...
  classNameSides?: string;
  classNameIndicator?: string;
/>

Replace this following default classes:

> classNameSides = "via-white to-white",
> classNameIndicator = "bg-blue-500 shadow-blue-500",

Follow me on X: adfdev

This content originally appeared on DEV Community and was authored by Alain Di Fabio

Print Share Comment Cite Upload Translate Updates

APA

Alain Di Fabio | Sciencx (2024-06-24T10:59:34+00:00) Shelf selector (Inspired Arc icon selector). Retrieved from https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/

MLA

" » Shelf selector (Inspired Arc icon selector)." Alain Di Fabio | Sciencx - Monday June 24, 2024, https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/

HARVARD

Alain Di Fabio | Sciencx Monday June 24, 2024 » Shelf selector (Inspired Arc icon selector)., viewed ,<https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/>

VANCOUVER

Alain Di Fabio | Sciencx - » Shelf selector (Inspired Arc icon selector). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/

CHICAGO

" » Shelf selector (Inspired Arc icon selector)." Alain Di Fabio | Sciencx - Accessed . https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/

IEEE

" » Shelf selector (Inspired Arc icon selector)." Alain Di Fabio | Sciencx [Online]. Available: https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/. [Accessed: ]

rf:citation

» Shelf selector (Inspired Arc icon selector) | Alain Di Fabio | Sciencx | https://www.scien.cx/2024/06/24/shelf-selector-inspired-arc-icon-selector/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.