https://github.com/kocisov/crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
https://github.com/kocisov/crab
crab custom-elements dom frontend interface library minimal react shadow-dom ui view webcomponents
Last synced: 4 months ago
JSON representation
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
- Host: GitHub
- URL: https://github.com/kocisov/crab
- Owner: kocisov
- Created: 2017-05-07T12:56:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-17T08:22:30.000Z (about 7 years ago)
- Last Synced: 2025-06-17T01:57:04.041Z (4 months ago)
- Topics: crab, custom-elements, dom, frontend, interface, library, minimal, react, shadow-dom, ui, view, webcomponents
- Language: TypeScript
- Homepage:
- Size: 98.6 KB
- Stars: 23
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API.
[](http://npmjs.com/@kocisov/crab) [](https://codeclimate.com/github/Kocisov/crab)
> This version of Crab was written in TypeScript to include Types for your development
### How does it look
```js
import { Component, defineComponents, render } from '@kocisov/crab'
export default class Header extends Component {
// or Polymer like => static get is()
static get componentName() {
return 'header-component'
}
state = {
id: 'Some string...',
}
changeState() {
this.setState({
id: uuid.v4(),
})
}
render() {
return `
Hello ${this.state.id}
`
}
}
defineComponents([Header, SmallButon], { crabug: true })
render(
`
`,
`
body {
margin: 0;
}
`,
document.getElementById('root'),
)
```
### Installation
This version of **Crab** is compiling from ES2015+ to ES5 ready even without native-shim.
##### Install crab with package manager
```bash
# yarn
yarn add @kocisov/crab
# npm
npm install --save @kocisov/crab
```
##### Include crab into your code
```js
// webpack with babel
import { Component, defineComponents, render } from '@kocisov/crab'
// ...
render(
`
`,
document.getElementById('root'),
)
```
### Docs
Work in progress at [docs](https://kocisov.gitbooks.io/crab/content/).