yansusanto

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system

// scss-docs-start gray-color-variables
$white:    #fff !default;
$gray-100: #f8f9fa !default;

yansusanto

const [inView, setInView] = React.useState(false);

React.useEffect(() => {
  const handleScroll = () => {
    const scrollThresholdVH = 30;

    if (window.scrollY > (window.innerHeight * scrollThresholdVH) / 100) {
      setInView(true);
    } else {
      setInView(false);

yansusanto

const data = [
  {
    name: 'Cluster 1',
    value: 210,
  },
  {
    name: 'Cluster 2',
    value: 30,
  },
  {

yansusanto

const randomString = () => Math.random().toString(36).slice(2);

yansusanto

import React, { Component } from 'react';
import { StyleSheet, View, Animated, Easing, Text, Image, AppState } from 'react-native';
import PropTypes from 'prop-types';
import { RNCamera } from 'react-native-camera';

const defaultRectStyle = { height: 300, width: 300, borderWidth: 0, borderColor: '#000000', marginBottom: 0 };
const defaultCornerStyle = { height: 32, width: 32, borderWidth: 3, borderColor: '#1dbc60' };
const defaultScanBarStyle = { marginHorizontal: 8, borderRadius: 2, backgroundColor: '#1dbc60' };
const defaultHintTextStyle = { color: '#aaa', fontSize: 14, backgroundColor: 'transparent', marginTop: 32 };

yansusanto

Install bootstrap

npm install react-bootstrap bootstrap

Install Sass

npm install node-sass gatsby-plugin-sass

Set up Bootstrap scss

• Download source files from getbootstrap.com and copy the scss directory to src/scss/bootstrap
• Configure gatsby-plugin-sass, specifying the bootstrap scss directory created in porevious step:

yansusanto

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
	anchor.addEventListener("click", (e) => {
		e.preventDefault();
		document.querySelector(anchor.getAttribute("href"))
		.scrollIntoView({
			behavior: "smooth",
			block: "start",
		});
	});
});

yansusanto

const oneYearLater = new Date(
  new Date().getFullYear(),
  new Date().getMonth() + 12,
  new Date().getDate()
);

let launchDate = oneYearLater;

yansusanto

Send mail php from html form without reload page and sending success and error alert with SweetAlert

• Add file needed by SweetAlert (js & css)
• don't forget to link JQuery and main.js
• Create your form according to your needs, don't forget the id
• Create PHP file according to your needs
• Enjoy!

See Sweet Alert in action! http://tristanedwards.me/sweetalert
Sweet Alert Github: https://github.com/t4t5/sweetalert

yansusanto

import { useState, useLayoutEffect } from 'react';

export const useWindowWidth = () => {
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);

    const handleWindowResize = () => {
        setWindowWidth(window.innerWidth);
    };

    useLayoutEffect(() => {