dropd

dropd copied to clipboard

Make it possible for the user to completely take control of dropd-list, dropd-item and dropd-toggle via Vue slots and a similar workaround in React, with relevant props bound to them.

⚒ Proposed API

• React

<Dropd {...props}>
  <Dropd.List>
      ...
      <Dropd.Item>
        ...
    </Dropd.Item>
  </Dropd.List>

  <Dropd.Toggle>
    ...
  </Dropd.Toggle>
</Dropd>

• Vue

<dropd {...props}>
  <ul slot="dropd-list">
    ...
    <li slot="dropd-item">
      ...
    </li>
  </ul>

  <button slot="dropd-toggle">
    ...
  </button>
</dropd>

For react, a context-consumer relationship will be just fine I guess.