Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/syarul/locomotor
A react hook without lingo
https://github.com/syarul/locomotor
Last synced: 3 days ago
JSON representation
A react hook without lingo
- Host: GitHub
- URL: https://github.com/syarul/locomotor
- Owner: syarul
- License: mit
- Created: 2018-07-04T02:55:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T02:39:42.000Z (almost 2 years ago)
- Last Synced: 2024-10-07T08:15:28.930Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 3.11 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# locomotor v0.1.13
[](https://www.npmjs.com/package/locomotor) [](https://unpkg.com/[email protected]/locomotor-min.js)
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](https://github.com/michael-klein/hookuspocus) for more info.
Some added features include:-
- createContext
- useContext
Working todoMVC sample is [here](https://github.com/syarul/locomotor-todomvc)
### 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](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](https://github.com/calebmer/node_modules/tree/master/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
```json
{
"plugins": [
["babel-plugin-transform-jsx", {
"useVariables": true,
"module": "locomotor"
}]
]
}
```
Also support ```@babel/plugin-transform-react-jsx```. Just add pragma to .babelrc plugin config
```json
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "Locomotor"
}]
]
}
```
then add import line to every ```*.js/*.jsx``` that needed tranformation.
```js
import Locomotor from 'locomotor'
```
Without jsx transformer, you also can return your function hooks as a js object instead
```js
{
elementName: 'div',
attributes: {},
children: ['hello locomotor!']
}
```
Read [babel-plugin-transform-jsx](https://github.com/calebmer/node_modules/blob/master/babel-plugin-transform-jsx/README.md) for more info.
### Usage
```jsx
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 (
{label} {state}
)
}
const props = {
label: 'click me!'
}
locoDOM.render(
,
document.body
)
```
*Stole the original library name and move it elsewhere*
> p/s: previous locomotor animation moved to branch locomotor-animate