@randajan/react-jetpack

@randajan/jetpack modification for react

Install

npm install --save @randajan/react-jetpack

React - jetpack pseudo-types

This module includes two pseudo-types. The main reason for these pseudo-types is to secure reactElement and reactComponent from being maped with jet.map.it.

• "reactElement" as "rele"
• "reactComponent" as "rent"

Example

jet.type(<div/>) === "rele";
jet.rele.is(<div/>) === true;

jet.rele.copy(<div/>, {id:"foo"}) === <div id="foo"/>
jet.rele() === <div/>

Details

Export

name	type	arguments	return	use
jet.rele	React Element	props	div container	Provider
CSSLib	class	defs	instance	Provide CSS module, where you can redefine classNames for whole project
CSSFile	class	CSSLib, file	instance	Provide wrap of require(file.css).
useForceRender	Hook	-	function	Create function for rerendering. Instance of this function will stay same after rerender
useEngage	Hook	function, number	{ result, pending, error }	Will handle any promise for you. Second argument is cachetime in ms
useFocus	Hook	boolean, function, boolean	ref	Will handle the focus of ref. When focus has changed the function (second argument) will be called
useDrag	Hook	function	[ref, move]	Will notice any attempt to drag and report it to function with details of event
useShift	Hook	function, number, number, boolean	[ref, move]	Turn the ref into shiftable object. Now user can drag the element around. Provided function can validate moving by editing passed object. Two numbers are initial X and Y coordinates and last argument switch relative (% !default) and absolute (px) positioning.
useSwipe	Hook	function, array, number, number	[ref]	Listen the swipe event. Arguments: callback on swipe, allowed direction, minimal distance, max time.

jet.rele.flags

It will transform the multidimensional object to fill the custom attribute "data-flags". If the iteration proces found true (boolean) it will append the key instead of the value. Any function will be called with provided arguments.

• Arguments
  • flags: mapable
  • ...args: any variables (will be passed to every function in flags variable)
• Return
  • array with flags
• Example
  • ["foo", "bar", "any"] === jet.rele.flags({nokey:v=>v, bar=>v==="foo", nofunction:"any"}, "foo")

jet.rele.inject

It will inject the return of injection to props of every children that met the filter criteria. Filter should be array with react types (or empty for disable filtering).

• Arguments
  • children: React.Children
  • injection: function / object (the [children, key, level] will be passed to this function)
  • deep: boolean (iterating nested children, it will affect the level pass to the injection function)
  • filter: array (React types that will be injected)
• Return
  • React.Children (array)
• Example

jet.rele.inject(<p id="bar"/>, {id:"foo"}) === <p id="foo"/>

jet.rele.inject(<div><p id="bar"/></div>, child=>({id:"foo"}), false) === <div id="foo"><p id="bar"/></div>

jet.rele.inject(<div><p id="bar"/></div>, child=>({id:child.type}), true) === <div id="div"><p id="p"/></div>

jet.rele.inject(<div><p id="bar"/></div>, child=>({id:"foo"+child.props.id}), true, ["p"]) === <div><p id="foobar"/></div>

CSSLib

Overview

CSSLib help managing clasNames across libraries. It can help adding multiple unique classNames cause it supports nested mapable objects. It can even resolve the functions anywhere inside. CSSLib should be created and instance exported with library for redefine the default classNames anywhere else

CSSLib.constructor / CSSLib.define

Define classNames translation for current CSSLib.

• Arguments
  • defs: object (flat object)
• Return
  • CSSLib

CSSLib.open__

Wraping the *.css into the CSSFile instance

• Arguments
  • file: object (webpack require(*.css))
• Return
  • CSSFile

CSSFile.get

It will return flat array with unique classNames. Array is enhanced so it will automatically joined separated with spaces instead of commas

• Arguments
  • ...classNames: object (support nested objects)
• Return
  • array

License

MIT © randajan