Cube-ascii-react NPM

cube-ascii-react

Description

This is a package to create a 3D ASCII cube in React.

🚀🚀You can try it online from your browser 🚀🚀

You can find the package in the npm registry:

🚀🚀 The package is available on npm 🚀🚀

Demo video

https://github.com/Im-Rises/cubeAscii/assets/59691442/f5bd5eae-67f1-4b75-88f0-6140808ba2f8

Package installation

To install it type npm install cube-ascii-react in your terminal to install it.

Then you can import it in your project with import ParticleSimulator from 'cube-ascii-react'.

Usage

To use it you can simply add the component in your project like this:

import React, {useEffect, useState} from 'react';
import './App.scss';
import {CubeAscii} from './components/CubeAscii';

const App: React.FC = () => {
    const divRef = React.useRef<HTMLDivElement>(null);
    const preTagRef = React.useRef<HTMLPreElement>(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [useColor, setUseColor] = useState(true);

    const copyToClipboard = async (text: string) => {
        try {
            await navigator.clipboard.writeText(text);
            console.log('Text copied to clipboard');
        } catch (err: unknown) {
            console.error('Failed to copy text: ', err);
        }
    };

    useEffect(() => {
        if (divRef.current) {
            setIsLoaded(true);
        }
    }, [divRef]);
    return (
        <div className={'App'} ref={divRef}>
            {
                isLoaded
                    ? (<>
                            <CubeAscii parentRef={divRef}/>
                        </>
                    )
                    : (
                        <p>Loading...</p>
                    )
            }
        </div>
    );
};

export default App;

or you can change some settings like this:

import React, {useEffect, useState} from 'react';
import './App.scss';
import {CubeAscii} from './components/CubeAscii';

const App: React.FC = () => {
    const divRef = React.useRef<HTMLDivElement>(null);
    const preTagRef = React.useRef<HTMLPreElement>(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [useColor, setUseColor] = useState(true);

    const copyToClipboard = async (text: string) => {
        try {
            await navigator.clipboard.writeText(text);
            console.log('Text copied to clipboard');
        } catch (err: unknown) {
            console.error('Failed to copy text: ', err);
        }
    };

    useEffect(() => {
        if (divRef.current) {
            setIsLoaded(true);
        }
    }, [divRef]);
    return (
        <div className={'App'} ref={divRef}>
            {
                isLoaded
                    ? (<>
                            <button onClick={() => {
                                setUseColor(!useColor);
                            }}/>
                            <button className={'Button-Copy-Clipboard'}
                                    onClick={async () => copyToClipboard(preTagRef.current!.innerText)}>Copy to clipboard
                            </button>
                            <CubeAscii parentRef={divRef} useColor={useColor} preTagRef={preTagRef}/>
                        </>
                    )
                    : (
                        <p>Loading...</p>
                    )
            }
        </div>
    );
};

export default App;

The component takes 1 to 9 props:

parentRef - a reference to the parent div of the canvas. It is used to get the size of the canvas.
screenWidth - the resolution of the cube view in characters.
screenHeight - the height of the cube view in characters.
cubeWidthHeight - the width and height of the cube in characters.
distanceFromCamera - the distance from the camera to the cube.
framerate - the framerate of the animation.
useColor - a boolean to use colors or not.
defaultColor - the default color of the cube when useColor is set to false.
preTagRef - a reference to the pre tag that contains the cube. You can use it to copy the cube to the clipboard.