a-z-index

Now only React!

How to use it:

data struct is array with object, the object must have a unique alpha key. If you set key with unalpha char, it's key will be set '#', indicate other.

For Dom: Please write the HTML struct must have realList className and data-key={cate.key} in cate render map div

<Azindex data={data} height={'500px'}>
      <div className='realList'>
         <div key={index} data-key={cate.key}>
         </div>
      </div>
</Azindex>

import { Azindex } from 'a-z-index'
function App() {
  var data = [
    {
      key: 'A',
      list: [
        1,2,3,4,5,6,7
      ]
    },
    {
      key: 'B',
      list: [
        1,2,3,4,5,6,7
      ]
    },
    {
      key: 'x',
      list: [
        1,2,3,4,5,6,7
      ]
    },
    {
      key: 'e',
      list: [
        1,2,3,4,5,6,7
      ]
    },
    {
      key: '1',
      list: [
        1,2,3,4,5,6,7
      ]
    }
  ]
  return (
    <div>
     <Azindex data={data} height={'500px'}>
      <div className='realList'>
        {
          data.map((cate, index)=>{
              return (
                <div key={index} data-key={cate.key}>
                <h1>{cate.key}</h1>
                <h4>{cate.key}</h4>
                <ul>
                  {
                    cate.list.map((item, index2)=>{
                      return <li key={index2}>{item}</li>
                    })
                  }
                </ul>
              </div>
              )
            })
          }
      </div>
     </Azindex>
    </div>
  );
}

export default App;

real effect