DOCSEARCHbyAlgolia
Submit Docs

avataaars-generator

repository·master·Indexed 25 days ago

https://github.com/fangpenlin/avataaars-generator

A web-based application for creating custom avatars based on designs by Pablo Stanley. Version 0.1.0 provides a standalone web interface and React components, including AvatarForm for customization, ComponentCode for generating img tags via the avataaars.io API, and a Renderer component for displaying avatars. It supports both client-side and server-side rendering modes and utilizes react-url-query to synchronize avatar configurations with URL query parameters.

Tokens
1K
Snippets
1
Records
12
Agent score
84%

What's inside avataaars-generator

  3. Use the Avataaars Generator in Server Rendering Mode

    master
    The Avataaars generator supports a server-side rendering (SSR) mode. When the URL contains the query parameter __render__=1, the application renders the Renderer component directly into the document.body instead of the standard #root element. This mode is intended for environments where the full App shell is not required and only the avatar rendering logic is needed.

  5. Use the Renderer component to display an Avatar

    master

    The Renderer component is a high-level React component used to render an Avatar based on provided props. It is wrapped with addUrlProps to automatically sync avatar configuration with URL query parameters.

    To use it, provide the following props:

    • avatarStyle: An AvatarStyle enum value (defaults to AvatarStyle.Circle).
    • onChangeUrlQueryParams: A callback function triggered when URL parameters change. Signature: (params: any, updateType: string) => void.
    • onChangeAvatarStyle: A callback function triggered when the avatar style changes. Signature: (avatarStyle: AvatarStyle) => void.

    Note: The component uses OptionContext internally to manage avatar options.

  7. Use the Avataaars Generator in Client Rendering Mode

    master
    In standard client-side mode (when __render__=1 is absent from the URL), the application renders the App component into the HTML element with the ID root. It also configures react-url-query using the internal history object to ensure that URL state updates are synchronized with the application state.

  11. AvatarForm Props Reference

    master

    The following props are available for the AvatarForm component:

    • avatarStyle: The current AvatarStyle (e.g., AvatarStyle.Circle or AvatarStyle.Transparent).
    • optionContext: An OptionContext object used to manage and retrieve the state of avatar options.
    • displayingCode: Boolean indicating if the React code snippet is currently visible.
    • displayingImg: Boolean indicating if the <img> tag preview is currently visible.
    • onDownloadPNG: Callback function triggered when the PNG download button is clicked.
    • onDownloadSVG: Callback function triggered when the SVG download button is clicked.
    • onAvatarStyleChange: Callback function triggered when the avatar style (Circle vs Transparent) is changed. Receives the new AvatarStyle.
    • onToggleCode: Callback function triggered when the code visibility is toggled.
    • onToggleImg: Callback function triggered when the image visibility is toggled.