faceyspacey / redux-first-router-link

<Link /> + <NavLink /> that mirror react-router's + a few additional props
MIT License
55 stars 33 forks source link

NavLink - Add a functionAsChild boolean prop to use children prop as a function #90

Closed Aetherall closed 6 years ago

Aetherall commented 6 years ago

This will allow easy conditional rendering and will integrate well with many CSS-in-JS technologies ! :)

Usage:

const SuperMenu = ({classes}) => (
    <NavLink to={'/space'} functionAsChild>
        { active => (
            <FancyButton className={active ? classes.rainbow : classes.gray}>
                 { active ? "You're in space now! Whooaaa" : 'Go to space !' }
            </FancyButton>
        )}
    </NavLink>
)

If there is a super fancy way to distinguish normal childs and functionsAsChilds, it would be better to use that instead of having a functionAsChild prop

But for the time being I hope this will help somebody !

Aetherall commented 6 years ago

I am reposting without the yarn nor yarn format so all checks will be successful