DOCSEARCHbyAlgolia
Submit Docs

Civet Documentation

website·Indexed 30 days ago

https://civet.js.org

An open-source framework for data handling and screen integration. Includes API references for @civet/core, such as ConfigContext, ConfigProvider, and the useConfigContext hook, as well as documentation for DataProvider, FetchProvider, and event handling.

Tokens
6.1K
Snippets
43
Records
56
Agent score
53%

What's inside Civet

  1. Overview of Civet data handling

    Civet is a React-powered library designed to handle data management, allowing developers to focus on the UI layer. It is flexible regarding data sources, enabling integration with nearly any backend, and provides functionality through React components and hooks for easy integration into existing environments.

  2. Use SSEReceiver for Server-Sent Events

    SSEReceiver is an EventReceiver implementation designed to handle server-sent events (SSE) using the native EventSource API.
    const eventSource = new EventSource('https://example.com');
const receiver = new SSEReceiver(eventSource);

  4. Implement advanced event handling with @civet/events

    The @civet/events module provides advanced event handling functionality. While the DataProvider in the core module offers basic event support (limited to updating all subscribers of a specific resource), @civet/events should be used for more complex event requirements.

  5. Use FetchProvider to make HTTP requests

    FetchProvider is a DataProvider implementation that utilizes the Web Fetch API. It allows for centralized request configuration, including base URLs and custom request/response handling.
    const provider = new FetchProvider({ baseURL: 'https://example.com' });

  6. Use @civet/common for quick start utilities

    The @civet/common module provides general-purpose functions designed for quick starts where extensive configuration is not required.

  7. Install @civet/common

    Install the common module to access general functions and providers like FetchProvider and SSEReceiver for quick starts without extensive configuration.
    npm install @civet/common

  8. Access data using the Resource component

    In Civet, the Resource component is the primary mechanism used to access data. Once the data is retrieved via the resource component, it can be passed down to display components for rendering.

  9. Install Civet modules via NPM

    Civet modules are published as packages on NPM under the @civet organization. For specific installation instructions for individual modules, refer to the Civet API Reference.
    npm install @civet/<module-name>

  10. Integrate event handlers using the eventPlugin

    The eventPlugin is a data provider plugin that integrates an event handler into a resource via a context plugin.

    To enable events, pass the events prop to a <Resource> component or the useResource hook. The events prop accepts:

    • A boolean: To enable or disable events.
    • An Event handler configuration object: For detailed configuration.

    Note: The resource parameter is automatically populated and does not need to be specified manually.

  11. Install the @civet/events module

    Install the events module to enable advanced event handling functionality beyond the basic support provided by DataProvider.
    npm install @civet/events

  12. Extend Civet functionality using DataProvider

    To add custom functionality to Civet, extend the DataProvider class. For basic functionality, you can add methods directly to your subclass and access them from a Resource or other components. For advanced extensions that require React hooks or modifications to the ResourceContext, use the extend method. Note that extend is called by the DataProvider constructor and may execute before your own constructor's logic.
    class MyDataProvider extends DataProvider {
  extend(extend) {
    super.extend(extend);

    // Register a context plugin
    extend.context(useMyContextPlugin);

    // Register a UI plugin
    extend.ui(MyUIPlugin);
  }

  // Add custom functionality here
}