Flinch is a lightweight, modular Javascript framework that is built for simplicity and readability. Modules are provided for popular features like context, lifecycle events, portals, and more.
Getting started with Flinch is easy and familiar to anyone with React experience.
import Flinch from '@flinch/core';
import render from '@flinch/dom';
const App = () => <div>This is a component!</div>;
render(<App />, document.getElementById('root'));
Out of the box, Flinch supports 2 basic types of nodes.
import Flinch from '@flinch/core';
const MyNode = props => <a href={props.url}>{props.name}</a>;
import Flinch, { StatefulNode } from '@flinch/core';
class MyStatefulNode extends StatefulNode {
state = { counter: 0 }
handleClick = () => this.setState({ counter: this.state.counter + 1 });
render() {
return <div onClick={this.handleClick}>Clicked { this.state.counter } times!</div>;
}
}