shubhang93/jsbin.zuhozugatu.css

## jsbin.zuhozugatu.css
.paginator{
	flex-direction:row;
	flex:1
}

.button-active {
 color:orange
}

.button-normal {
	color:black
}

## jsbin.zuhozugatu.js
"use strict";

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

var _React = React;
var useState = _React.useState;
var useEffect = _React.useEffect;

var usePagination = function usePagination() {
	var data = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
	var offsetSize = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1];

	var _useState = useState(1);

	var _useState2 = _slicedToArray(_useState, 2);

	var pageNumber = _useState2[0];
	var setPage = _useState2[1];

	var _useState3 = useState([]);

	var _useState32 = _slicedToArray(_useState3, 2);

	var visibleData = _useState32[0];
	var setVisibleData = _useState32[1];

	var numPages = Math.ceil(data.length / offsetSize);
	var startIndex = pageNumber * offsetSize - offsetSize;

	useEffect(function () {
		var endIndex = pageNumber * offsetSize;
		setVisibleData(data.slice(startIndex, endIndex));
	}, [pageNumber]);

	var onPageChange = function onPageChange(pageNumber) {
		setPage(pageNumber);
	};
	return [pageNumber, numPages, visibleData, onPageChange];
};

var App = function App(props) {
	var data = Array(1000).fill(0).map(function (i, idx) {
		return idx + 1;
	});

	var _usePagination = usePagination(data);

	var _usePagination2 = _slicedToArray(_usePagination, 4);

	var page = _usePagination2[0];
	var numPages = _usePagination2[1];
	var visibleData = _usePagination2[2];
	var onPageChange = _usePagination2[3];

	return React.createElement(
		"div",
		null,
		visibleData.map(function (d) {
			return React.createElement(
				"li",
				{ key: d },
				d
			);
		}),
		React.createElement(
			"div",
			{ className: "paginator" },
			Array(numPages).fill(0).map(function (_, idx) {
				return React.createElement(
					"button",
					{ key: idx + 1, onClick: function () {
							return onPageChange(idx + 1);
						} },
					idx + 1
				);
			})
		)
	);
};

ReactDOM.render(React.createElement(App, null), document.getElementById("app"));

## pagination using hooks
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.paginator{
	flex-direction:row;
	flex:1
}

.button-active {
 color:orange
}

.button-normal {
	color:black
}
</style>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script>
	<div id="app"></div>
<script id="jsbin-javascript">
"use strict";

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

var _React = React;
var useState = _React.useState;
var useEffect = _React.useEffect;

var usePagination = function usePagination() {
	var data = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
	var offsetSize = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1];

	var _useState = useState(1);

	var _useState2 = _slicedToArray(_useState, 2);

	var pageNumber = _useState2[0];
	var setPage = _useState2[1];

	var _useState3 = useState([]);

	var _useState32 = _slicedToArray(_useState3, 2);

	var visibleData = _useState32[0];
	var setVisibleData = _useState32[1];

	var numPages = Math.ceil(data.length / offsetSize);
	var startIndex = pageNumber * offsetSize - offsetSize;

	useEffect(function () {
		var endIndex = pageNumber * offsetSize;
		setVisibleData(data.slice(startIndex, endIndex));
	}, [pageNumber]);

	var onPageChange = function onPageChange(pageNumber) {
		setPage(pageNumber);
	};
	return [pageNumber, numPages, visibleData, onPageChange];
};

var App = function App(props) {
	var data = Array(1000).fill(0).map(function (i, idx) {
		return idx + 1;
	});

	var _usePagination = usePagination(data);

	var _usePagination2 = _slicedToArray(_usePagination, 4);

	var page = _usePagination2[0];
	var numPages = _usePagination2[1];
	var visibleData = _usePagination2[2];
	var onPageChange = _usePagination2[3];

	return React.createElement(
		"div",
		null,
		visibleData.map(function (d) {
			return React.createElement(
				"li",
				{ key: d },
				d
			);
		}),
		React.createElement(
			"div",
			{ className: "paginator" },
			Array(numPages).fill(0).map(function (_, idx) {
				return React.createElement(
					"button",
					{ key: idx + 1, onClick: function () {
							return onPageChange(idx + 1);
						} },
					idx + 1
				);
			})
		)
	);
};

ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
</script>


<script id="jsbin-source-css" type="text/css">.paginator{
	flex-direction:row;
	flex:1
}

.button-active {
 color:orange
}

.button-normal {
	color:black
}</script>

<script id="jsbin-source-javascript" type="text/javascript">const{useState,useEffect}=React

const usePagination=function(data=[],offsetSize=100){
	const[pageNumber,setPage]=useState(1)
  const[visibleData,setVisibleData]=useState([])
	const numPages=Math.ceil(data.length/offsetSize)
	const startIndex = (pageNumber*offsetSize)-offsetSize


	useEffect(()=>{
	const endIndex= pageNumber*offsetSize
	setVisibleData(data.slice(startIndex,endIndex))
	},[pageNumber])

	const onPageChange=function(pageNumber){
		setPage(pageNumber)
	}
	return [pageNumber,numPages,visibleData,onPageChange]
}


const App = function(props){
	 let data= Array(1000).fill(0).map((i,idx)=>idx+1)
	 const[page,numPages,visibleData,onPageChange]=usePagination(data)
	 return (
	  <div>
		  {visibleData.map(d=><li key={d}>{d}</li>)}
		  <div className="paginator">
		   {Array(numPages).fill(0).map((_,idx)=><button key={idx+1} onClick={()=>onPageChange(idx+1)}>{idx+1}</button>)}
		 </div>
		 </div>
	 )
}


ReactDOM.render(<App/>,document.getElementById("app"))</script></body>
</html>
	.paginator{
	flex-direction:row;
	flex:1
	}

	.button-active {
	color:orange
	}

	.button-normal {
	color:black
	}
	"use strict";

	var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

	var _React = React;
	var useState = _React.useState;
	var useEffect = _React.useEffect;

	var usePagination = function usePagination() {
	var data = arguments.length <= 0 \|\| arguments[0] === undefined ? [] : arguments[0];
	var offsetSize = arguments.length <= 1 \|\| arguments[1] === undefined ? 100 : arguments[1];

	var _useState = useState(1);

	var _useState2 = _slicedToArray(_useState, 2);

	var pageNumber = _useState2[0];
	var setPage = _useState2[1];

	var _useState3 = useState([]);

	var _useState32 = _slicedToArray(_useState3, 2);

	var visibleData = _useState32[0];
	var setVisibleData = _useState32[1];

	var numPages = Math.ceil(data.length / offsetSize);
	var startIndex = pageNumber * offsetSize - offsetSize;

	useEffect(function () {
	var endIndex = pageNumber * offsetSize;
	setVisibleData(data.slice(startIndex, endIndex));
	}, [pageNumber]);

	var onPageChange = function onPageChange(pageNumber) {
	setPage(pageNumber);
	};
	return [pageNumber, numPages, visibleData, onPageChange];
	};

	var App = function App(props) {
	var data = Array(1000).fill(0).map(function (i, idx) {
	return idx + 1;
	});

	var _usePagination = usePagination(data);

	var _usePagination2 = _slicedToArray(_usePagination, 4);

	var page = _usePagination2[0];
	var numPages = _usePagination2[1];
	var visibleData = _usePagination2[2];
	var onPageChange = _usePagination2[3];

	return React.createElement(
	"div",
	null,
	visibleData.map(function (d) {
	return React.createElement(
	"li",
	{ key: d },
	d
	);
	}),
	React.createElement(
	"div",
	{ className: "paginator" },
	Array(numPages).fill(0).map(function (_, idx) {
	return React.createElement(
	"button",
	{ key: idx + 1, onClick: function () {
	return onPageChange(idx + 1);
	} },
	idx + 1
	);
	})
	)
	);
	};

	ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.paginator{
	flex-direction:row;
	flex:1
	}

	.button-active {
	color:orange
	}

	.button-normal {
	color:black
	}
	</style>
	</head>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script>
	<div id="app"></div>
	<script id="jsbin-javascript">
	"use strict";

	var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

	var _React = React;
	var useState = _React.useState;
	var useEffect = _React.useEffect;

	var usePagination = function usePagination() {
	var data = arguments.length <= 0 \|\| arguments[0] === undefined ? [] : arguments[0];
	var offsetSize = arguments.length <= 1 \|\| arguments[1] === undefined ? 100 : arguments[1];

	var _useState = useState(1);

	var _useState2 = _slicedToArray(_useState, 2);

	var pageNumber = _useState2[0];
	var setPage = _useState2[1];

	var _useState3 = useState([]);

	var _useState32 = _slicedToArray(_useState3, 2);

	var visibleData = _useState32[0];
	var setVisibleData = _useState32[1];

	var numPages = Math.ceil(data.length / offsetSize);
	var startIndex = pageNumber * offsetSize - offsetSize;

	useEffect(function () {
	var endIndex = pageNumber * offsetSize;
	setVisibleData(data.slice(startIndex, endIndex));
	}, [pageNumber]);

	var onPageChange = function onPageChange(pageNumber) {
	setPage(pageNumber);
	};
	return [pageNumber, numPages, visibleData, onPageChange];
	};

	var App = function App(props) {
	var data = Array(1000).fill(0).map(function (i, idx) {
	return idx + 1;
	});

	var _usePagination = usePagination(data);

	var _usePagination2 = _slicedToArray(_usePagination, 4);

	var page = _usePagination2[0];
	var numPages = _usePagination2[1];
	var visibleData = _usePagination2[2];
	var onPageChange = _usePagination2[3];

	return React.createElement(
	"div",
	null,
	visibleData.map(function (d) {
	return React.createElement(
	"li",
	{ key: d },
	d
	);
	}),
	React.createElement(
	"div",
	{ className: "paginator" },
	Array(numPages).fill(0).map(function (_, idx) {
	return React.createElement(
	"button",
	{ key: idx + 1, onClick: function () {
	return onPageChange(idx + 1);
	} },
	idx + 1
	);
	})
	)
	);
	};

	ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
	</script>


	<script id="jsbin-source-css" type="text/css">.paginator{
	flex-direction:row;
	flex:1
	}

	.button-active {
	color:orange
	}

	.button-normal {
	color:black
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">const{useState,useEffect}=React

	const usePagination=function(data=[],offsetSize=100){
	const[pageNumber,setPage]=useState(1)
	const[visibleData,setVisibleData]=useState([])
	const numPages=Math.ceil(data.length/offsetSize)
	const startIndex = (pageNumber*offsetSize)-offsetSize


	useEffect(()=>{
	const endIndex= pageNumber*offsetSize
	setVisibleData(data.slice(startIndex,endIndex))
	},[pageNumber])

	const onPageChange=function(pageNumber){
	setPage(pageNumber)
	}
	return [pageNumber,numPages,visibleData,onPageChange]
	}






	const App = function(props){
	let data= Array(1000).fill(0).map((i,idx)=>idx+1)
	const[page,numPages,visibleData,onPageChange]=usePagination(data)
	return (
	<div>
	{visibleData.map(d=><li key={d}>{d}</li>)}
	<div className="paginator">
	{Array(numPages).fill(0).map((_,idx)=><button key={idx+1} onClick={()=>onPageChange(idx+1)}>{idx+1}</button>)}
	</div>
	</div>
	)
	}


	ReactDOM.render(<App/>,document.getElementById("app"))</script></body>
	</html>