DEV Community

Cover image for Monkey Stone Js
toutpuissantged
toutpuissantged

Posted on

Monkey Stone Js

Monkey JS

github

What is a monkey js ?

monkey js is a javascript library that allows you to create a reactive custom component

How to use monkey js ?

  • import the monkey js library in your project
import  monkey  from 'monkey-js';
Enter fullscreen mode Exit fullscreen mode
  • create a new component
class Custom extends Monkey.Component {}
Enter fullscreen mode Exit fullscreen mode
  • use State in your component
class Custom extends Monkey.Component {
  state = {
    value: '',
  }
  render() {
    const div = document.createElement('div');
    div.innerHTML = this.state.value;
    div.addEventListener('click', () => {
      this.setState({
        value: 'clicked',
      });
    });
    return div;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • register your component outside the library
customElements.define('custom', Custom);
Enter fullscreen mode Exit fullscreen mode

API

list of all api

  • ComponentDidMount

    this methodes is called when component will be added to dom

    • ### usage
      componentDidMount(){
        console.log('componentDidMount')
      }
    
  • ComponentWillUnmount

    this methodes is called when component will be removed from dom

    • ### usage
      componentWillUnmount(){
        console.log('componentWillUnmount')
      }
    
  • componentDidUpdate

    this methodes is called when component will be updated

    • ### usage
      componentDidUpdate(){
        console.log('componentDidUpdate')
      }
    
  • setState

    this methodes is used to update the state of the component

    • ### usage
      this.setState({
        text : 'new text',
      })
    
  • render

    this methodes is used to render the component ui
    each time when state is updated the render methode is automaticaly called also to rebuild the component ui with the new value

    • ### usage
      render(){
        return document.createElement('div');
      }
    
  • envent Emiter

    this methodes is used to emit an event

    • ### usage
      this.emitEvent('eventName', {
        data: 'data',
      })
    
  • state

    this property is used to store the component state
    to updated the state use the setState methodes
    ! warning : the state is not immutable , dont try to change the state directly , use the setState methodes

    • ### usage
      state = {
        text : 'text',
      }
    

upcoming features

  • props

    this property is used to store the component props

  • componentWillReceiveProps

    this methodes is called when component will receive new props

License

License

Developer

GitHub

Discussion (0)