Skip to main content

Import in project

About 1 min...

Waline official client provides various versions of files. You can import and use the official client in several ways.

NPM Packages

Waline official client has been released to npmopen in new window via @waline/client, you can install it with the following command:

pnpm
pnpm add -D @waline/client

For the modules exported by @waline/client, see Client Reference → Files.

Import in Normal Project

Here is an example of importing and using @waline/client in a normal website project.

TS
import { init } from '@waline/client';

import '@waline/client/dist/waline.css';

init({
  el: '#waline',
  // ...
});

Import in Vue Project

Since @waline/client itself is based on Vue3, we directly export a responsive Vue component.

All properties of components are reactive, you can find all supported properties in Client Reference → Component Props.

Demo
<template>
  <Waline :serverURL="serverURL" :path="path" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

import '@waline/client/dist/waline.css';

const serverURL = 'https://waline.vercel.app';
const path = computed(() => useRoute().path);
</script>

Since we use responsive path, when the route changes, @waline/client will automatically refresh and display the comments of the corresponding route.

Import in React project

With a simple wrapper, you can turn Waline into a React component:

import React, { useEffect, useRef } from 'react';
import {
  type WalineInstance,
  type WalineInitOptions,
  init,
} from '@waline/client';

import '@waline/client/dist/waline.css';

export type WalineOptions = Omit<WalineInitOptions, 'el'> & { path: string };

export const Waline = (props: WalineOptions) => {
  const walineInstanceRef = useRef<WalineInstance | null>(null);
  const containerRef = React.createRef<HTMLDivElement>();

  useEffect(() => {
    walineInstanceRef.current = init({
      ...props,
      el: containerRef.current,
    });

    return () => walineInstanceRef.current?.destroy();
  }, []);

  useEffect(() => {
    walineInstanceRef.current?.update(props);
  }, props);

  return <div ref={containerRef} />;
};
TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.
What do you think?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v3.0.0-alpha.4