React-dot-patterns NPM

react-dot-patterns

Generate DOM base dots patterns.

Setup / Install

npm i react-dot-patterns
yarn add react-dot-patterns

Quickstart

import { Dots } from "react-dot-patterns"

function ContactUs() {
    return (
        <>
            <Dots col={5} row={5}/>
        </>
    )
}

export default ContactUs

Params for (All are Optional props)

Name	Type	Default	Description
col	number	3	Columns object count
row	number	3	Rows object count
size	number / string	20	Object size or CS unit string for size
rotate	number	0	Rotate angle numbers
margin	number / string	5	Object margin or CS unit string for size
color	string	"#bbb"	Color string code
style	React.CSSProperties	{}	React CSSProperties object
item	JSX.Element	null	Replace the original dot with your own elements
evenRowShift	number / string	undefined	For even rows, init margin will be apper at first item
onItemClick	Function	() => {}	Will callback a (x,y) that user clicked to regarding item

Full Usage

import { Dots } from "react-dot-patterns"

function ContactUs() {
    return (
        <>
            <Dots
                col={3}
                row={3}
                size={20}
                rotate={0}
                margin={5}
                color={"#bbb"}
                item={null}
                style={{}}
                evenRowShift={undefined}
                onItemClick={(i, j) => console.log(i, j, "clicked")}
            />
        </>
    )
}

export default ContactUs

Custom item

Input a JSX.Element to item for generate regarding patterns.

import { Dots } from "react-dot-patterns"
import { Icon12Hours } from '@tabler/icons-react';

function ContactUs() {
    return (
        <>
            <Dots
                col={3}
                row={3}
                item={<Icon12Hours />}
            />
        </>
    )
}

export default ContactUs