For some reason, it doesn't work for me

[KonstantinReido]

Hi @johno, want to use your solution in my project, but for some reason, it doesn't work.

What I did:

import React, { useEffect } from "react";
...
import { Policy, When } from "pundit";

export default function Landing() {
  const { user } = useAuth()
  const landingPolicy = new Policy();

  useEffect(() => {
    if(user) {
      landingPolicy.add("create", (user, record) => user.pioneer);
    }
  }, [user]);

  return(
    <When can="create" user={user} policy={landingPolicy} record={"landing"}>
      <div>
        <Link to="/create">Create</Link>
      </div>
    </When>
  );
}

It doesn't show me my link. Even if I replace user.pioneer with true

Maybe you see an issue with my setup. We can later improve README, so others will understand how to use it with React.

v0.1.0

[chrisalley]

The implemention of <When> is incomplete. However, by wrapping the <When> with a <PunditProvider> it is currently possible to show/hide the link:

return(
  <PunditProvider user={user} policy={landingPolicy} record={"landing"}>
    <When can="create">
      <div>
        <Link to="/create">Create</Link>
      </div>
    </When>
  </PunditProvider>
);

There's a question of whether the Readme should be updated to require that <When> is wrapped with <PunditProvider>, or if the implementation to be updated. It would be less verbose to be able to use <When> without specifying a provider for each use case, especially when only authorising a single link.