emreavcilar/!a.domFn.js

## !a.domFn.js
/*
All kind of dom functions
*/

## bottomVisible.js
/*
This snippet checks whether the bottom of a page is visible.
*/

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

bottomVisible(); // true

## createElementWithString.js
/*
Create reactjs elements with strings by assigning a DOM element
to a variable with an uppercase letter. React will call
React.createElement() and create the element internally. Used commonly
in libraries like MaterialUI where you declare a "component" prop.
*/

// JSX supports string elements
const MyElement = 'div';

const App() {
  return (
    <div>
      <h1>Hello</h1>
      <MyElement>
        <h2>Inside the div element</h2>
      </MyElement>
    </div>
  )
}

## elementContains.js
/*
This snippet checks whether the parent element contains the child.
*/

const elementContains = (parent, child) => parent !== child && parent.contains(child);

elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

## formatNumber.js
/*
You can format a number in reactjs as "#,###,###,###" using the toLocaleString()
method of Number in javascript, because it renders numbers relative to the
visitor's browser settings. So numbers render correctly for English, Arabic
or other parts of the world.
*/

export const FormatNumber = ({value}=>{
  return <div>{value.toLocaleString()}</div>
})

//usage
<FormatNumber value={12345} />

//output
<div>12,345</div>

## getStyle.js
/*
This snippet can be used to get the value of a CSS rule for a particular element.
*/

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'

## hasClass.js
/*
This snippet checks whether an element has a particular class.
*/

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

## hide.js
/*
This snippet can be used to hide all elements specified.
*/


const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

## insertAfter.js
/*
This snippet can be used to insert an HTML string after the end of a particular element.
*/

const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>

## insertBefore.js
/*
This snippet can be used to insert an HTML string before a particular element.
*/

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>

## multipleInputChange.js
/*
In your #reactjs forms reuse your onChange() handler
across multiple inputs by using the event name to update the state changes.
*/

// javascript
const [data,setData] = useState({});
const onChange = (e) => setData({...data, [e.target.name]: e.target.value});

// html
<input type="text"
        name="name"
        value={data.name}
        onChange={onChange}
/>

## nodeListToArray.js
/*
This snippet can be used to convert a nodeList to an array.
*/

const nodeListToArray = nodeList => [...nodeList];

nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]

## scrollTo.js
/*
javascript code that scrolls to the top of the page
*/

window.scrollTo({
  top:0,
  behavior:'smooth'
});

## scrollToTop.js
/*
This snippet can be used to do a smooth scroll to the top of the current page.
*/


const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();

## setStyle.js
/*
This snippet can be used to set the value of a CSS rule for a particular element.
*/

const setStyle = (el, ruleName, val) => (el.style[ruleName] = val);

setStyle(document.querySelector('p'), 'font-size', '20px');
// The first <p> element on the page will have a font-size of 20px

## show.js
/*
This snippet can be used to show all the elements specified.
*/


const show = (...el) => [...el].forEach(e => (e.style.display = ''));

show(...document.querySelectorAll('img')); // Shows all <img> elements on the page

## smoothScroll.js
/*
This snippet can be used to smoothly scroll the element on which
it is called into the visible area of the browser window.
*/

const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });

smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar

## toggleClass.js
/*
This snippet can be used to toggle a class for an element.
*/

const toggleClass = (el, className) => el.classList.toggle(className);

toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore


## valueAsNumber.jsx
/*
Use the property valueAsNumber to get the numeric number from an input field through an event.
*/

export function App(){
  const handleChange = (e) => {
    let num = e.target.valueAsNumber;
  }

  return (
    <div>
      <input type=""number" onChange={handleChange} />
    </div>
  )
}
	/*
	This snippet checks whether the bottom of a page is visible.
	*/

	const bottomVisible = () =>
	document.documentElement.clientHeight + window.scrollY >=
	(document.documentElement.scrollHeight \|\| document.documentElement.clientHeight);

	bottomVisible(); // true
	/*
	Create reactjs elements with strings by assigning a DOM element
	to a variable with an uppercase letter. React will call
	React.createElement() and create the element internally. Used commonly
	in libraries like MaterialUI where you declare a "component" prop.
	*/

	// JSX supports string elements
	const MyElement = 'div';

	const App() {
	return (
	<div>
	<h1>Hello</h1>
	<MyElement>
	<h2>Inside the div element</h2>
	</MyElement>
	</div>
	)
	}
	/*
	This snippet checks whether the parent element contains the child.
	*/

	const elementContains = (parent, child) => parent !== child && parent.contains(child);

	elementContains(document.querySelector('head'), document.querySelector('title')); // true
	elementContains(document.querySelector('body'), document.querySelector('body')); // false
	/*
	You can format a number in reactjs as "#,###,###,###" using the toLocaleString()
	method of Number in javascript, because it renders numbers relative to the
	visitor's browser settings. So numbers render correctly for English, Arabic
	or other parts of the world.
	*/

	export const FormatNumber = ({value}=>{
	return <div>{value.toLocaleString()}</div>
	})

	//usage
	<FormatNumber value={12345} />

	//output
	<div>12,345</div>
	/*
	This snippet can be used to get the value of a CSS rule for a particular element.
	*/

	const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

	getStyle(document.querySelector('p'), 'font-size'); // '16px'
	/*
	This snippet checks whether an element has a particular class.
	*/

	const hasClass = (el, className) => el.classList.contains(className);
	hasClass(document.querySelector('p.special'), 'special'); // true
	/*
	This snippet can be used to hide all elements specified.
	*/


	const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

	hide(document.querySelectorAll('img')); // Hides all <img> elements on the page
	/*
	This snippet can be used to insert an HTML string after the end of a particular element.
	*/

	const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);

	insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>
	/*
	This snippet can be used to insert an HTML string before a particular element.
	*/

	const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

	insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>
	/*
	In your #reactjs forms reuse your onChange() handler
	across multiple inputs by using the event name to update the state changes.
	*/

	// javascript
	const [data,setData] = useState({});
	const onChange = (e) => setData({...data, [e.target.name]: e.target.value});

	// html
	<input type="text"
	name="name"
	value={data.name}
	onChange={onChange}
	/>