DOCSEARCHbyAlgolia
Submit Docs

Cosmic UI Documentation

repository·main·Indexed 20 days ago

https://github.com/rizkimuhammada/cosmic-ui

A free and open-source UI library providing futuristic components for modern web applications. Includes features such as the MobileMenuContext for managing mobile navigation visibility and a dynamic SVG rendering system via setupSvgRenderer and the Paths type for rendering complex frame path configurations.

Tokens
1.2K
Snippets
4
Records
6
Agent score
69%

What's inside Cosmic UI

  1. Get started with Cosmic UI

    main

    Cosmic UI is a library of futuristic, modern UI components designed for creating high-end interfaces. For full installation guides, component references, and detailed usage instructions, visit the official documentation website.

    https://cosmic-ui.com/docs

  2. How MobileMenuContext works

    main
    The MobileMenuContext is used to manage the global state of the mobile navigation menu within the application. The App component acts as the provider, wrapping the entire application layout. This allows any component nested within the App component (including those rendered via <Outlet />) to trigger the opening or closing of the mobile menu, ensuring a consistent UI state across different routes and components.

  3. Use MobileMenuContext to control mobile menu visibility

    main

    The MobileMenuContext is a React Context provided by the App component. It allows child components to access and control the visibility of the mobile navigation menu.

    It provides an object with two properties:

    • showMenu: A boolean indicating whether the menu is currently visible.
    • setShowMenu: A state dispatcher function to update the showMenu state.

    To use this in your components, consume the context using the useContext hook.

    import { useContext } from 'react';
import { MobileMenuContext } from './App'; // Adjust path as necessary

const MyComponent = () => {
  const { showMenu, setShowMenu } = useContext(MobileMenuContext);

  return (
    <button onClick={() => setShowMenu(!showMenu)}>
      {showMenu ? 'Close Menu' : 'Open Menu'}
    </button>
  );
};

  4. Initialize an SVG renderer with `setupSvgRenderer`

    main

    Use setupSvgRenderer to attach a dynamic SVG drawing system to an existing <svg> element. This function handles automatic re-rendering when the element's size changes (via ResizeObserver) or when its parent undergoes CSS transitions or animations.

    Parameters:

    • el: The target SVGSVGElement.
    • paths: An array of Paths configuration objects.
    • enableBackdropBlur?: (Optional) If true, creates a div with a backdrop-filter: blur(10px) that uses the SVG as a mask. This is useful for complex masking effects.
    • enableViewBox?: (Optional) If true, sets the SVG viewBox attribute based on the element's current dimensions.

    Returns: An object containing a destroy() method to disconnect the ResizeObserver and clean up resources.

    import { setupSvgRenderer } from './src/utils/frame';

const svgElement = document.querySelector('svg') as SVGSVGElement;
const myPaths: Paths = [
  {
    style: { strokeWidth: '2', stroke: 'black', fill: 'red' },
    path: [['M', '0', '0'], ['L', '100%', '100%']]
  }
];

const renderer = setupSvgRenderer({
  el: svgElement,
  paths: myPaths,
  enableBackdropBlur: true,
  enableViewBox: true
});

// Call renderer.destroy() when the component unmounts

  5. Define frame path configurations with the `Paths` type

    main

    The Paths type is used to define a collection of SVG path segments that can be rendered dynamically. Each object in the array represents a path and supports relative sizing using percentages or mathematical expressions (e.g., width, height).

    Each path object contains:

    • name?: An optional identifier.
    • show?: An optional boolean to control visibility.
    • style: An object defining strokeWidth (string), stroke (string), and fill (string).
    • path: An array of command tuples in the format [command, x, y]. Supported commands are M (Move To) and L (Line To). Coordinates x and y can be numbers or strings containing percentages or calculations (e.g., "50%", "width / 2").
    export type Paths = {
  name?: string;
  show?: boolean;
  style: {
    strokeWidth: string;
    stroke: string;
    fill: string;
  };
  path: (["M", string, string] | ["L", string, string])[];
}[];