@zarghamaijaz/react-dropdown v1.1.2

@zarghamaijaz/react-dropdown

A simple yet flexible dropdown component for React. V 1.1.2 -> removed unnecessary files from the downloadable package

Installation

npm install @zarghamaijaz/react-dropdown

Basic Usage

This is a basic example. See the bottom of the page for more detailed examples.

import Dropdown from '@zarghamaijaz/react-dropdown';

function YourComponent(props){
    return(
        <Dropdown
            {/* Add a custom head component, it will be wrapped in an anchor tag for better accessibility. */}
            head={(
                <div>A clickable head element that toggles the dropdown</div>
            )}
        >
            <div>This should appear when the dropdown is expanded.</div>
        </Dropdown>
    )
}

Props

Advanced Usage

These are some advanced usage examples

Using as a sidebar link

import Dropdown from '@zarghamaijaz/react-dropdown'

function App() {

  const currentRoute = window.location.pathname; // or use your own logic to get the current route

  const sidebarLinks = [
    {label: 'Dashboard', link: '/dashboard'},
    {label: 'Users', link: '/users', sublinks: [
      {label: 'All Users', link: '/users/list'},
      {label: 'Add User', link: '/users/add'},
    ]},
    {label: 'Posts', link: '/posts', sublinks: [
      {label: 'All Posts', link: '/posts/list'},
      {label: 'Add Post', link: '/posts/add'},
    ]},
    {label: 'Settings', link: '/settings'},
  ]

  return (
    <div>
      <div>
        <h2 style={{fontSize: '2rem', fontWeight: '600'}}>Use as a sidebar</h2>
      </div>
      <div style={{width: '280px'}}>
        <ul style={{listStyle: 'none', padding: 0}}>
          {
            sidebarLinks.map(item => {
              const isLinkActive = currentRoute.includes(item.link);
              return (
                <li key={item.link}>
                  {
                    item.sublinks && item.sublinks.length > 0 ? (
                      <Dropdown
                        defaultActive={isLinkActive}
                        head={
                          <div style={{borderRadius:'0.25rem', backgroundColor: isLinkActive ? 'lightblue' : 'transparent', padding: '0.5rem 1rem', cursor: 'pointer', marginBlockEnd: '0.5rem'}}>{item.label}</div>
                        }
                      >
                        {
                          item.sublinks && (
                            <ul style={{listStyle: 'none', paddingInlineStart: '1rem'}}>
                              {item.sublinks.map(subitem => {
                                  const isSublinkActive = currentRoute.includes(subitem.link);
                                  return(
                                    <li key={subitem.link}>
                                      <a href={subitem.link} style={{display:'block', textDecoration:'none', color:'inherit', borderRadius:'0.25rem', backgroundColor: isSublinkActive ? 'lightblue' : 'transparent', padding: '0.5rem 1rem', cursor: 'pointer'}}>{subitem.label}</a>
                                    </li>
                                  )
                              })}
                            </ul>
                          )}
                      </Dropdown>
                    ) : (
                      <a href={item.link} style={{display:'block', textDecoration:'none', color:'inherit',borderRadius:'0.25rem', backgroundColor: isLinkActive ? 'lightblue' : 'transparent', padding: '0.5rem 1rem', cursor: 'pointer', marginBlockEnd: '0.5rem'}}>{item.label}</a>
                    )
                  }
                </li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}

export default App

Using as a floating dropdown

import Dropdown from '@zarghamaijaz/react-dropdown'

function App() {

  return (
    <div>
      <div>
        <h2 style={{fontSize: '2rem', fontWeight: '600'}}>Use as a floating dropdown</h2>
      </div>
      <Dropdown
        closeOnOutsideClick // will be closed if clicked anywhere outside

        // will be applied to outer most div
        style={{position: 'relative', width: 'fit-content'}}

        head={(
          <div style={{display:'flex', gap:'0.5rem', alignItems: 'center', paddingBlockEnd: '1rem', cursor: 'pointer'}}>
            <span style={{fontSize: '1.2rem'}}>John Doe</span>
            <div style={{height: '2rem', width: '2rem'}}>
              <img src="/user.png" alt="John Doe" style={{display: 'block', height: '100%', width: '100%', objectFit: 'cover', borderRadius: '50%', backgroundColor: 'lightgray'}} />
            </div>
          </div>
        )}
      >
        <div  style={{boxShadow: '0px 0px 10px 0px #00000050', position: 'absolute', zIndex:'1', background: 'white', minWidth: '100%', top: '100%'}}>
          <a href="#profile" style={{display: 'block', color: 'inherit', textDecoration: 'none', padding: '0.5em 1em'}}>Profile</a>
          <a href="#logout" style={{display: 'block', color: 'inherit', textDecoration: 'none', padding: '0.5em 1em'}}>Logout</a>
        </div>
      </Dropdown>
      <div>Some content that will appear below the dropdown</div>
    </div>
  )
}

export default App