@keepeek/keepicker-react NPM

Integration

Steps to use the Keepicker

1 - Import the JavaScript file registering kpk-keepicker web component :

<head>
  <script async src="keepicker.js"></script>
</head>

2 - Add the web component tag in the DOM :

<body>
  <kpk-keepicker
    id="keepicker"
    keycloak-url="XXX"
    keycloak-realm="XXX"
    keycloak-client-id="XXX"
    api-endpoint="XXX"
    data-locale="FR"
    ui-locale="FR"
  ></kpk-keepicker>
</body>

3 - Add a callback that will be triggered when selecting an asset :

<script>
  document
    .querySelector("#keepicker")
    .addEventListener("kpk-insert", (event) => {
      console.log(event.detail.element);
    });
</script>

Examples

React

function App() {
  const ref = useRef();

  useEffect(() => {
    if (ref && ref.current) {
      const currentRef = ref.current;
      const handleInsert = (event) => console.log(event.detail.element);
      currentRef.addEventListener("kpk-insert", handleInsert);
      return () => {
        currentRef.removeEventListener("kpk-insert", handleInsert);
      };
    }
  }, []);
  return (
    <div className="App">
      <kpk-keepicker
        ref={ref}
        keycloak-url="XXX"
        keycloak-realm="XXX"
        keycloak-client-id="XXX"
        api-endpoint="XXX"
        data-locale="FR"
        ui-locale="FR"
      ></kpk-keepicker>
    </div>
  );
}

Drupal form

To integrate component in a form, add a container :

$form['container']['picker'] = [
  '#type' => 'container',
  '#attributes' => array('id'=>'kpk-keepicker-container'),
];

Add a behaviour to mount web component :

Drupal.behaviors.addKeepickerWebComponentMarkup = {
  attach: function (context) {
    if (context.id === "node-article-edit-form") {
      document.querySelector("#kpk-keepicker-container").innerHTML =
        '<kpk-keepicker id="keepicker" keycloak-url="XXX" keycloak-realm="XXX" keycloak-client-id="XXX" api-endpoint="XXX" data-locale="FR" ui-locale="FR"></kpk-keepicker>';
      document
        .querySelector("#keepicker")
        .addEventListener("kpk-insert", (event) => {
          document.querySelector(".keepicker-url").value =
            event.detail.element.previewUrl;
        });
    }
  },
};

List of attributes

Name	Madatory	Type	Default value	Description
api-endpoint	yes	String		API Endpoint
keycloak-url	no	String	Configuration from API endpoint	Keycloak URL
keycloak-realm	no	String	Configuration from API endpoint	Keycloak Realm
keycloak-client-id	no	String	Default Keepicker Client ID	Keycloak Client ID
keycloak-idp	no	String		Keycloak IDP name for SSO connection
data-locale	no	String	FR	Data locale
ui-locale	no	String	FR	Interface locale