DEV Community 👩‍💻👨‍💻

Andreas Riedmüller
Andreas Riedmüller

Posted on

How would you name this?

I have to implement this component and have a hard time naming it. Does anyone have an idea?

a interface component with left and right arrow

<PageCarousel>?
<PrevNextControl>?

This happens quite often to me actually and I guess I am not alone.

What is your approach to solving these cases? Is there a place where you can search a library of interface elements and find the correct name?

My default approach is to search for similar comonents in a framework like https://material.io/components. Sometimes I check if the designer has already named it in Figma. Or, if I know another interface/website with that element, I'll see if it has a class name :)

Any input appreciated!

Top comments (11)

Collapse
 
codingchili profile image
Robin Duda (they/them)

"bunny-pages"

  • lowercase
  • with at least one dash
  • prefixed with namespace

Rules for naming elements are in the HTML5 spec. 🙂

html.spec.whatwg.org/multipage/cus...

Collapse
 
receter profile image
Andreas Riedmüller

Why bunny?

In my case it is a React element.

Interesting read though, I think a lot about naming stuff.

I was wondering why it is required to include a hypen and it was explained:

They contain a hyphen, used for namespacing and to ensure forward compatibility (since no elements will be added to HTML, SVG, or MathML with hyphen-containing local names in the future).

Thanks for your comment!

Collapse
 
codingchili profile image
Robin Duda (they/them)

I've just named the component library "bunny components" after a game I'm using them in.

Collapse
 
tqbit profile image
tq-bit • Edited on
  1. What does it do? -> Show the current Page -> Provide navigation to other Pages

That's pretty much it Imo.

I'd go for AppPageNavigation. It's more distinctive than the Pagination, but probably not perfectly unambiguous.

Collapse
 
receter profile image
Andreas Riedmüller

I do like PageNavigation!

Collapse
 
mrlinxed profile image
MrLinxed

I've called mine "Pagination" when I developed it. Still seems to me like the best option.

Collapse
 
receter profile image
Andreas Riedmüller

Yes, if this is your main pagination control it makes sense to call it like that.

In my case I already have a pagination that looke like this:

pagination

Collapse
 
vjanovec profile image
vjanovec • Edited on

I would relate the name to "Pagination"
<Page> ? <Pagination> <nextPage> <prevPage>
Check this out
mui.com/material-ui/react-pagination/

Collapse
 
receter profile image
Andreas Riedmüller

It definitely is a pagination thing. I already have a "real" pagination component so I disregarded this, but yes, you are right.

Something like <MicroPagination> or <MiniPagination> would already be better than what I have.

Or I could use my existing pagination and configure it with showPages={false} or something like that.

Thanks!

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited on

To me, "Pagination" is not really the best name because its meaning doesn't really describe the control well. I would go with "PageSelector"

Collapse
 
receter profile image
Andreas Riedmüller

PageSelector, I love it. 🙌

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.