svz-toolkit v0.1.7
svz-toolkit
This module includes a wide variety of utilities for your use in any new website. From an automatically constructed parallax element (with scroll smoothing), to dropdown menus, to an element that automatically pulls and constructs a metadata preview from a url.
Getting Started
Installation
To install, in terminal type
npm i --save svz-toolkitthen, in your react project,
import svz-toolkit from 'svz-toolkit';or
import {[DesiredComponent]} from 'svz-toolkit';and finally, implement it by including that component within your code:
<[DesiredComponent]
{options}
/>Address
A component functionally allowing you to make an address and edit the variables in it if you set a submit function.
Optional Props
name
Accepted Types:
Note: this is a required prop if onSubmit is not set.
Behavior:
street1
Accepted Types:
Note: this is a required prop if onSubmit is not set.
Behavior:
street2
Accepted Types:
Behavior:
city
Accepted Types:
Behavior:
state
Accepted Types:
Behavior:
zip
Accepted Types:
Behavior:
number
Accepted Types:
Behavior:
onSubmit
Accepted Types:
Behavior:
Attention
children
Accepted Types:
Behavior:
on
Accepted Types:
Behavior:
Button
children
Accepted Types:
Behavior:
id
Accepted Types:
Behavior:
className
Accepted Types:
Behavior:
onClick
Accepted Types:
Behavior:
CompareSlideshow
slideWidth
Accepted Types:
Behavior:
slideHeight
Accepted Types:
Behavior:
slideshow
Accepted Types:
Behavior:
interval
Accepted Types:
Behavior:
vertical
Accepted Types:
Behavior:
style
Accepted Types:
Behavior:
ContactForm
name
Accepted Types:
Behavior:
business
Accepted Types:
Behavior:
Accepted Types:
Behavior:
message
Accepted Types:
Behavior:
onSubmit
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
isOrder
Accepted Types:
Behavior:
budget
Accepted Types:
Behavior:
error
Accepted Types:
Behavior:
errorActive
Accepted Types:
Behavior:
street1
Accepted Types:
Behavior:
street2
Accepted Types:
Behavior:
city
Accepted Types:
Behavior:
zip
Accepted Types:
Behavior:
state
Accepted Types:
Behavior:
types
Accepted Types:
Behavior:
Dropdown
A Dropdown menu element, also available individually as the sysvisionz-react-dropdown npm package.
Required Props
children
Behavior: Content of the activating button.
content
Accepted Types: array of strings or JSX elements
Behavior: dictates the children of the entries in the dropdown menu.
Optional Props
drop
Accepted Types: 'up', 'down', 'left', 'right'
Default: 'down'
Behavior: This dictates the direction that your dropdown menu drops out of the activating button. downLeft and upLeft are special variants; they render a normal drop, but orient the menu's edge to the opposite of the basic version (to the right edge for downLeft and upLeft, and to the bottom edge for rightUp and leftUp) to the activating button instead of the left edge. Note that, due to their nature, they make the pop variable unnecessary by definition.
pop
Accepted Types: 'up', 'down', 'left', 'right'
Default: drop
note: cannot be opposite of drop.
Behavior: This dictates the direction that your dropdown menu pops outwards from the inital dropped out element.
orientation
Accepted Types: 'top', 'bottom', 'left', 'right', 'center'
Behavior: controls the dropdown menu relative to the activating button. 'center' will make a menu dropping downwards appear centered beneath the activating button, 'left' will make the right edge of the menu align with the right edge of the activating button, 'top' aligns the bottom edge with the bottom edge of the activating button, and so on.
open
Accepted Types: Boolean
Default: false
note: need not be set unless controlled is true.
Behavior: Whether the dropdown is open or not.
controlled
Accepted Types: Boolean
Behavior: dictates whether the menu is opened and closed by an outside variable (which is supplied through the open prop).
keepOpen
Accepted Types: boolean
Default: controlled
Behavior: Dictates if dropdown menu will stay open when clicking outside it or on the entries in the menu. Menu can still be closed by clicking on the activating button
note: if you do set this to false while controlled is true, it is highly recommended that you use the onToggle function to reset open!
onToggle
Accepted Types: function
supplies: Boolean of current open state of menu.
Behavior: function performed when menu is opened or closed.
onOpen
Accepted Types: function
Behavior: function performed when menu is opened.
onClose
Accepted Types: function
Behavior: function performed when menu is closed.
slideIn
Accepted Types: Boolean
Behavior: The menu does a smooth slide in animation.
fadeIn
Accepted Types: Boolean
Behavior: The menu does a smooth fade in animation.
transition
Accepted Types: Number
Behavior: Delays menu close for this many milliseconds, for the purposes of manually applied css transitions.
className
Accepted Types: String
Behavior: dictates the className for the overall element. Adds to prefix of svz-dropdown-container and is followed by active when the menu element is open.
id
Accepted Types: String
Behavior: dictates the id for the dropdown containing div
ElemPicker
elems
Accepted Types:
Behavior:
transitionTime
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
scrollToward
Accepted Types:
Behavior:
rowLength
Accepted Types:
Default: 3
Behavior:
index
Accepted Types:
Behavior:
selection
Accepted Types:
Behavior:
ElemSquare
content
Accepted Types:
Behavior:
rowMax
Accepted Types:
Behavior:
rowMin
Accepted Types:
Behavior:
ExpanderBox
content
Accepted Types:
Behavior:
column
Accepted Types:
Behavior:
closeButton
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
onOpen
Accepted Types:
Behavior:
onClose
Accepted Types:
Behavior:
ExpandingText
value
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
placeholder
Accepted Types:
Behavior:
maxheight
Accepted Types:
Behavior:
minHeight
Accepted Types:
Behavior:
onCancel
Accepted Types:
Behavior:
onSubmit
Accepted Types:
Behavior:
editButton
Accepted Types:
Behavior:
Fader
key
Accepted Types:
Behavior:
children
Accepted Types:
Behavior:
Input
editButton
Accepted Types:
Behavior:
onEditClick
Accepted Types:
Behavior:
onSubmit
Accepted Types:
Behavior:
clear
Accepted Types:
Behavior:
active
Accepted Types:
Behavior:
id
Accepted Types:
Behavior:
value
Accepted Types:
Behavior:
close
Accepted Types:
Behavior:
label
Accepted Types:
Behavior:
LoginBox
Accepted Types:
Behavior:
pass
Accepted Types:
Behavior:
login
Accepted Types:
Behavior:
persist
Accepted Types:
Behavior:
loggingIn
Accepted Types:
Behavior:
loggingInContent
Accepted Types:
Behavior:
error
Accepted Types:
Behavior:
errorActive
Accepted Types:
Behavior:
MetaElement
url
Accepted Types:
Behavior:
Modal
active
Accepted Types:
Behavior:
startActive
Accepted Types:
Behavior:
onOpen
Accepted Types:
Behavior:
onClose
Accepted Types:
Behavior:
noEsc
Accepted Types:
Behavior:
closeButton
Accepted Types:
Behavior:
className
Accepted Types:
Behavior:
superModal
Accepted Types:
Behavior:
OverlayBox
children
Accepted Types:
Behavior:
className
Accepted Types:
Behavior:
content
Accepted Types:
Behavior:
onClick
Accepted Types:
Behavior:
Parallax
children
Accepted Types:
Behavior:
className
Accepted Types:
Behavior:
id
Accepted Types:
Behavior:
slow
Accepted Types:
Behavior:
src
Accepted Types:
Behavior:
PopContent
children
Accepted Types:
Behavior:
open
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
label
Accepted Types:
Behavior:
icon
Accepted Types:
Behavior:
horizontal
Accepted Types:
Behavior:
ProfileCard
birthdate
Accepted Types:
Behavior:
children
Accepted Types:
Behavior:
name
Accepted Types:
Behavior:
ScreenManager
children
Accepted Types:
Behavior:
offset
Accepted Types:
Behavior:
Passed Props
screenLock
Type: Function
Behavior:
screenLocked
Type: Boolean
Behavior:
smooth
Type: Function
Behavior:
smoothed
Type: Boolean
Behavior:
scrollToward
Type: Function
Behavior:
smoothScrolling
Type: Function
Behavior:
addListener
Type: Function
Behavior:
Selector
label
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
options
Accepted Types:
Behavior:
Slideshow
interval
Accepted Types:
Behavior:
slideshow
Accepted Types:
Behavior:
vertical
Accepted Types:
Behavior:
on
Accepted Types:
Behavior:
noArrows
Accepted Types:
Behavior:
arrowType
Accepted Types: React Element or String of fatArrow, fromBar, swoop, thinArrow, doublePointer, thinPointer
Behavior:
TagsPicker
list
Accepted Types:
Behavior:
onChange
Accepted Types:
Behavior:
onSubmit
Accepted Types:
Behavior:
className
Accepted Types:
Behavior:
active
Accepted Types:
Behavior:
Exra Functions
Array.sameVal
Array.standardized
Array.sequential
Number.confine
Number.calcAdditive
Number.isPositive
Object.filter
Object.sameVal
callbacker
filterJoin
alterClass
Extra Classes
CookieMan
Gradienter
NumberMan
TimeMan
Author
- Colin Brennan - full project - SysVisionz Github, SysVisionz NPM Modules
Version History
0.1 -
initial alpha release