locomotor
v0.1.13
Published
A react hook without lingo
Downloads
24
Readme
locomotor v0.1.13
A React like hook without lingo
What's this
A view library which using function hooks through
- useReducer
- useState
- useEffect
- useLayoutEffect
See Michael Klein's hookuspocus for more info.
Some added features include:-
- createContext
- useContext
Working todoMVC sample is here
Info
- Reusable function hooks, you can import as many times elsewhere, and the library will isolate each hook.
- Optional
key
property when handling list/array mapping. - May not need to
import
pragma on every js/jsx that need transpiling. - Currently, it's around 9kb gzip.
Some concern includes:-
- Event delegation, for faster lifecycle updates and better performance.
- Plain callbacks/Promises to reduce file size and dependency on regenerator-runtime.
- Improving render queue.
- Removing redundant operations.
- Test unit
Quick Getting Start
Install with npm
npm i locomotor
or
clone repo https://github.com/syarul/getting-start-locomotor
check into the cloned directory
npm install && npm start
JSX caveats
If using Caleb's babel-plugin-transform-jsx:-
- No Pragma
- No * @jsx * comments
- No createElement
- No $$typeof, props, key, ref, or other specific React lingo
- key is optional
- You can still pass props as usual to function hooks but not necessary
You don't need to add pragma import line to handle jsx transform on every file, ensure add module
parameter to .babelrc plugins config
{
"plugins": [
["babel-plugin-transform-jsx", {
"useVariables": true,
"module": "locomotor"
}]
]
}
Also support @babel/plugin-transform-react-jsx
. Just add pragma to .babelrc plugin config
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "Locomotor"
}]
]
}
then add import line to every *.js/*.jsx
that needed tranformation.
import Locomotor from 'locomotor'
Without jsx transformer, you also can return your function hooks as a js object instead
{
elementName: 'div',
attributes: {},
children: ['hello locomotor!']
}
Read babel-plugin-transform-jsx for more info.
Usage
import { locoDOM, useState, useEffect } from 'locomotor'
function App (props) {
const { label } = props || {}
const [state, setState] = useState('foo')
const click = () => {
setState((state === 'foo' && 'bar') || 'foo')
}
useEffect(() => {
console.log(`current state is ${state}`)
}, [state])
return (
<button onClick={click}>
{label} {state}
</button>
)
}
const props = {
label: 'click me!'
}
locoDOM.render(
<App {...props} />,
document.body
)
Stole the original library name and move it elsewhere
p/s: previous locomotor animation moved to branch locomotor-animate