Get Started

Introduction

Getting Started

Showcase

Contributing

Liberary

Responsive

Spacing

Theme Setup

Grid

Atoms

Molecules

Functions

v1.0.9

Get Started

Introduction

Getting Started

Showcase

Contributing

UI Templates

Library

Responsive

Spacing

Theme Setup

Grid

Atoms

Molecules

Functions

scrollTocurrentDevice

Scroll To

scrollTo function can be used to scroll to certain section with transition. This fuction can recieve 4 arguememnts targetQuery, offsetFromTop, nthQuerry & timeToReach. Out of these targetQuery is cumpulsory, offsetFromTop is 0 by default, nthQuerry is 0 by default & timeToReach is 600.

// scroll to target
import { Button, scrollTo } from "atomize";
const YellowButton = () => {
    return (
        <Button
            id="blueButton"
            onClick={() => scrollTo("#yellowButton")}
            bg="info700"
          >
            Scroll To Yellow Button
        </Button>
    )
}

Scroll with offset and different duration

// scroll To with offset and transition
import { Button, scrollTo } from "atomize";
const YellowButton = () => {
    return (
        <Button
            id="yellowButton"
            onClick={() => scrollTo("#blueButton", 100, 0, 800)}
            bg="warning700"
          >
            Scroll To Blue Button
        </Button>
    )
}

CurrentDevice

currentDevice function can be used to find the current device name according to the devices in responsiveness, i.e. it returns a string from xs, sm, md, lg or xl according to the current device in use.

// perform function only when device is xl
import { Button, currentDevice } from "atomize";
const CurrentDecieAlert = () => {
  componentDidMount() {
    const deviceSize = currentDevice()
    deviceSize === "xl" && this.deviceIsXL()
  }
  deviceIsXL = () => {
    alert("Current device is xl")
  }
  
  render() {
      return (
          {/* Your Component */}
      )
  }
}