Accept function for offset calc

[drochag]

Closes #4 with an alternative for a function.

[mauricevancooten]

Thank you for your contribution @DanMMX, I've published the latest version with your addition to NPM.

[imshuffling]

@DanMMX - could you provide a more in-depth example on how to use the offset calc? cheers.

[drochag]

@imshuffling the README has an example, which is

 <AnchorLink offset={() => 100} href='#things'>Things</AnchorLink>

that function calculates the offset you need to scroll from, as a real implementation I can share you this

export const calcOffset = (idx) => window.innerWidth >= 1089 ? (window.scrollY === 0 || idx === 0 ? 0 : 52) : window.innerWidth >= 760 ? 132 : 80
export const links = [{
  text: 'Ceremonia',
  target: 'ceremony'
}, {
  text: 'Galería',
  target: 'gallery'
}, {
  text: 'Damas y Damos',
  target: 'brides'
}, {
  text: 'Dunia y Daniel',
  modifier: 'large'
}, {
  text: 'Itinerario',
  target: 'itinerary'
}, {
  text: 'Alojamiento',
  target: 'accommodation'
}, {
  text: 'Confirmación',
  target: 'confirmation'
}]

const AnimatedMenu = ({shown, darkened}) => (
  <div className={classNames('AnimatedMenu', { 'AnimatedMenu--show': shown, 'AnimatedMenu--darkened': darkened })}>
    <div className="AnimatedMenu-menuContainer">
      {links.filter(link => !link.modifier).map((link, idx) => <div className="AnimatedMenu-itemContainer" key={link.text} >
        <AnchorLink
          offset={calcOffset.bind(null, idx)}
          href={`#${link.target}`}
          className="AnimatedMenu-item"
        >
          {link.text}
        </AnchorLink>
      </div>)}
    </div>
  </div>
)

which you can see live on https://dunydan.blissddm.xyz/ . That calcOffset function checks wether the window has specific innerWidth and also considering a sticky header (on desktop scroll down until you see the cherry header slide down).

Let me know if that works for you.