DOCSEARCHbyAlgolia
Submit Docs

M4L Core Documentation

website·Indexed 30 days ago

https://m4ldocs.made4labs.com

Documentation for the @m4l/core package, featuring a suite of React contexts, hooks, and utilities for building applications. Key components include NetworkContext for HTTP requests, EnvironmentContext for environment variables, and specialized hooks such as useAuth, useNetwork, usePaginate, and useDomain.

Tokens
22.4K
Snippets
124
Records
156
Agent score
49%

What's inside M4L

  1. Overview of M4L Core Utils

    M4L Core Utils are a collection of auxiliary functions and helpers designed to encapsulate common and complex logic into simple, reusable operations. They are primarily pure (or near-pure) functions that provide type safety via TypeScript, centralize common logic to prevent duplication, and offer unified error handling across the M4L ecosystem.

  2. Overview of MADE4LABS React Monorepo

    MADE4LABS is a monorepo providing a collection of production-ready React components and utilities. It is designed for rapid development, consistent design, and easy integration into modern React projects. Key features include a modular architecture (allowing developers to install only required packages to optimize bundle size), full TypeScript support, and responsive design.

  4. Overview of HostToolsContext

    HostToolsContext is an advanced React context used to centralize and expose general tools and utilities across an application. It allows components to access navigation history, toast notifications, progress bar controls, and an event system without passing them via props, which is particularly useful for decoupling communication between microfrontends and the host application.

  5. Manage domain country information with DomainCountryContext

    The DomainCountryContext is a React context used to centralize and expose domain-specific country information, such as currency, numeric formatting symbols, and decimal precision. It ensures that child components and microfrontends have consistent and reactive access to these localization settings.

  6. Manage global authentication state with AuthContext

    AuthContext is a React context designed to centralize and expose the global authentication state of a user, including event handlers for login and logout. It uses useReducer for efficient state management and integrates with environment, network, and host tool contexts. It is essential for implementing access control, session management, and user-based personalization.

  7. Use BaseContext to share generic state in React

    BaseContext is a generic, reusable React context designed to standardize how data and logic (such as state, configurations, users, or forms) are shared between components. It centralizes state management to avoid code duplication and uses an internal store to efficiently handle updates and automatic state synchronization when props change.

  8. Manage environment configurations with EnvironmentContext

    The EnvironmentContext is a React context designed to centralize critical environment variables and configurations. It allows components to consistently access parameters such as API hosts, resource URLs, and execution modes (standalone vs. microfrontend), which is essential for applications deploying across multiple environments (development, staging, production) or as part of a microfrontend architecture.

  9. Manage paginated lists with the usePaginate hook

    The usePaginate hook is a utility for managing the pagination of element lists with network support. It handles API calls to a specified endpoint, manages the current page and rows per page, and maintains the pagination state reactively. It is designed for components that need to display large datasets divided into pages.
    import { usePaginate } from '@m4l/core';

const MiComponente = () => {
  const { rows, pagerState, onPageChange, onRowsPerPageChange } = usePaginate({
    endPoint: '/api/users',
    queryParams: { status: 'active' },
    rowsPerPage: 10
  });

  return (
    <div>
      <p>Total de registros: {pagerState.totalRecords}</p>
      <p>Página actual: {pagerState.page}</p>
    </div>
  );
};

  11. Perform network requests using axiosOperation

    The axiosOperation function is the primary utility for network operations in the M4L architecture. It provides a unified interface for HTTP requests, automatically managing authentication, data transformation (snake_case/camelCase), error handling, toast notifications, and loading progress. It integrates directly with the application's environment and host tools.
    import { axiosOperation } from '@m4l/core';

const MiComponente = () => {
  const environment = useEnvironment();
  const hostTools = useHostTools();

  const fetchData = async () => {
    try {
      const response = await axiosOperation({
        method: 'GET',
        endPoint: 'users',
        parms: { page: 1, limit: 10 }
      }, environment, hostTools);
      
      console.log('Datos obtenidos:', response);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <div
      <button onClick={fetchData}>Obtener datos</button>
    </div>
  );
};

  12. Use DomainContext to manage business domain information

    DomainContext is a React context used to centralize and expose business domain data (such as company name, logos, and slogans) across an application. It ensures that branding information is available reactively after being loaded from the API, allowing child components to access this data consistently.