0

Digital Number Demo in React

const {useState} = React;
const theme = [
    {
        color: '#FF0000',
        unActiveColor: '#22221e',
        backgroundColor: '#000',
    },
    {
        color: '#000',
        unActiveColor: '#aaa',
        backgroundColor: '#F17D13',
    },
    {
        color: '#0078D7',
        unActiveColor: '#AAD1F0',
        backgroundColor: '#DD4F43',
    },
    {
        color: '#F17D13',
        unActiveColor: '#FCD8B9',
        backgroundColor: '#92E78C',
    },
];
const number = [
    {
        value: 0,
        active: [0, 1, 2, 4, 5, 6],
    },
    {
        value: 1,
        active: [2, 6],
    },
    {
        value: 2,
        active: [1, 2, 3, 4, 5],
    },
    {
        value: 3,
        active: [1, 2, 3, 5, 6],
    },
    {
        value: 4,
        active: [0, 2, 3, 6],
    },
    {
        value: 5,
        active: [0, 1, 3, 5, 6],
    },
    {
        value: 6,
        active: [0, 1, 3, 4, 5, 6],
    },
    {
        value: 7,
        active: [1, 2, 6],
    },
    {
        value: 8,
        active: [0, 1, 2, 3, 4, 5, 6],
    },
    {
        value: 9,
        active: [0, 1, 2, 3, 5, 6],
    },
];
const lineArray = [
    '40,80 60,60 80,80 80,160 60,180 40,160',
    '63,57 83,37 147,37 167,57 147,77 83,77',
    '150,80 170,60 190,80 190,160 170,180 150,160',
    '63,183 83,163 147,163 167,183 147,204 83,204',
    '40,206 60,187 80,207 80,287  60,307 40,287',
    '63,310 83,290 147,290 167,310 147,330 83,330',
    '150,206 169,187 190,207 190,287  170,307 150,287',
];
const DigitalNumber = ({
                           nums,
                           width = "100%",
                           height = "400px",// if you wanna auto use 100%
                           color = "#FF0000",
                           unActiveColor = "#22221e",
                           backgroundColor = "#000",
                           transition = 'none'
                       }) => {
    let numsArray = nums ? nums.split('') : [1, 2, 3];
    numsArray = numsArray.filter((item) => /[0-9]/g.test(item));
    return (
        <div
            style={{
                background: backgroundColor,
                display: 'flex',
                width: width,
                height: height,
                transition: transition ? transition : 'none',
            }}
        >
            {numsArray.map((item, index) => {
                return (
                    <svg
                        key={`${item}-${index}`}
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 228 376"
                        width="100%"
                        height="100%"
                        xmlnsXlink="http://www.w3.org/1999/xlink"
                    >
                        <g>
                            {lineArray.map((line, lineIndex) => {
                                return (
                                    <polygon
                                        key={line}
                                        points={line}
                                        style={{fill: number[item].active.includes(lineIndex) ? color : unActiveColor}}
                                    />
                                );
                            })}
                        </g>
                    </svg>
                );
            })}
        </div>
    );
};
const App = () => {
    const [nums, setNums] = useState("123456789");
    const [active, setActive] = useState(0);
    const handleInput = (e) => {
        setNums(e.target.value)
    };
    const handleTheme = (index) => {
        setActive(index)
    };
    return (
        <div style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
        }}>
            <h1>Digital Number Demo</h1>
            <div style={{marginBottom: 24}}>
                <span>Enter number to transfer:  </span>
                <input onChange={(e) => handleInput(e)}/>
            </div>
            <div style={{display: 'flex', marginBottom: 36}}>
                <span>choose theme:  </span>
                <div style={{display: 'flex', marginLeft: 10}}>
                    {
                        theme.map((item, index) => (
                            <div
                                style={{
                                    width: 24,
                                    height: 24,
                                    marginRight: 8,
                                    backgroundColor: item.color,
                                    transform: `translate(0,${index === active ? '-5px' : 0})`,
                                    transition: '0.5s',
                                }}
                                key={item.color}
                                onClick={() => handleTheme(index)}
                            />))
                    }
                </div>
            </div>
            <DigitalNumber nums={nums} {...theme[active]} transition="1s"/>
        </div>
    )
};

// Render app
ReactDOM.render(<App />, document.getElementById("app"));
<div>
<div id="app"></div>
</div>
RUN
add comment
Suggest a different solution or add another example