V_core_react_toolkit NPM

v_core_react_toolkit

============================

⚠ ALPHA ver. Warning ALPHA ver. ⚠

============================

a package that gives you custom React things

Install

npm install --save v_core_react_toolkit

Usage

import {
  components, //? React Components
  hooks, //? React Hooks
  creators, //? Creator Functions Array
  utils
} from 'v_core_react_toolkit'

const {
  LogoV9,
  Section,
  HCC_PreviewSection,
  demoExamples  // Array of Example Components
} = components

const {
  CounterHookExample,
  HoverHookExample,
  MountedHookExample,
  OnlineStatusHookExample,
  TogglerHookExample,
  LocalStorageHookExample,
  WindowSizeHookExample,
  ContextWithProviderExample
} = demoExamples  

const {
  useCounter,
  useDocumentTitle,
  useHover,
  useIsMounted,
  useToggler,
  useWindowSize,
  useOnlineStatus,
  useLocalStorage,
  useMousePosition,
  useRelativeMousePosition,
  useNetworkState,
  useThrottledFunction
} = hooks

const {
  createContextAndHook
} = creators


const { 
  canUseDOM,
  throttle
} = utils
// Your Custom Code...

Hooks

useCounter

import React from 'react'

import { hooks: { useCounter } } from 'v_core_react_toolkit'

const App = () => {
  const { count, setCount, increment, decrement, reset } = useCounter(4)

  useDocumentTitle(count)

  return (
    <div>
      <V9Logo height='240px' width='120px' />
      
      <p>Count: {count}</p>
      <button onClick={() => increment()}>increment</button>
      <button onClick={() => decrement()}>decrement</button>
      <button onClick={() => setCount(count + 5)}>Add 5</button>
      <button onClick={() => setCount(count - 5)}>Subtract 5</button>
      <button onClick={() => reset()}>reset</button>
    </div>
  )
}