#@mazzard/react

Install

npm i @mazzard/react

Using

You may create components as usual for React but all you need is in React
The easiest way to start using @mazzard/react is create-react-app.
After start a project with create-react-app you may change

import React from 'react'
import ReactDOM from 'react-dom'

to

import React from '@mazzard/react'

Then you may use React.render to put your app in some element like ReactDOM.render

import React from '@mazzard/react'
import App from './App'

React.render(<App />, document.getElementById('root'))

children

You may get children elements with this.children

class Test extends React {
  render () {
    return this.children
  }
}
React.render(<Test>test</Test>, document.getElementById('root'))
// test

render () { return this.children } is default render of React so you may use react component without render

class Test extends React {}
React.render((
  <Test>
    <React>test</React>
  </Test>
), document.getElementById('root'))
// test

You may use default children with children field

class Test extends React {
  children = 'default children'
}
React.render(<Test />, document.getElementById('root1'))
// default children
React.render(<Test>custom children</Test>, document.getElementById('root2'))
// custom children

You may use a function as a child

React.render((
  <Test>
    {() => 'function children'}
  </Test>
), document.getElementById('root'))
// function children

You may get default children in the function

React.render((
  <Test>
    {old => (
      <>
        <s>{old}</s>
        New children
      </>
    )}
  </Test>
), document.getElementById('root'))
// <s>default children</s>New children

You may use default children as function

class Test extends React {
  children = () => this.props.value
}
React.render(<Test value='test value' />, document.getElementById('root'))
// test value

Heirs overwrite default children

class Test1 extends React {
  children = () => 1
}
class Test2 extends Test1 {
  children = () => 2
}
React.render(<Test2 />, document.getElementById('root'))
// 2

Props

You may use props to say which props you handle and set default value

class Test extends React {
  static props = {
    test1: 1
  }
  render () {
    return this.props.test1
  }
}
React.render(<Test test1={2} />, document.getElementById('root1'))
// 2
React.render(<Test />, document.getElementById('root2'))
// 1

You may get other props from otherProps

class Link extends React {
  static props = {
    to: '/'
  }
  render () {
    return <a href={this.props.to} {...this.otherProps}>test</a>
  }
}
React.render(<Link to='/test' target='_blank' />, document.getElementById('root'))
// <a href='/test' target='_blank'>

Heirs complement props

class Test1 extends React {
  static props = {
    test1: ''
  }
}
class Test2 extends Test1 {
  static props = {
    test2: ''
  }
  render () {
    return Object.keys(this.otherProps).join(', ')
  }
}
React.render(<Test2 test1 test2 test3 />, document.getElementById('root'))
// test3

className

Now you may use class names as never before easy

class Test extends React {
  render () {
    return this.className
  }
}
React.render(<Test className='test' />, document.getElementById('root'))
// test

You may add default classes with className field

class Test extends React {
  className = 'test1'
  render () {
    return this.className
  }
}
React.render(<Test className='test2' />, document.getElementById('root'))
// test2 test1

Heirs complement className

class Test1 extends React {
  className = 'test1'
  render () {
    return this.className
  }
}
class Test2 extends Test1 {
  className = 'test2'
  render () {
    return this.className
  }
}
React.render(<Test2 className='test3' />, document.getElementById('root'))
// test3 test2 test1

classNames

class Test1 extends React {
  classNames = {
    test1: 'my-test1',
    test2: 'my-test2'
  }
  render () {
    console.log(this.classNames)
    return this.className
  }
}

you will get in console {test1: 'my-test1', test2: 'my-test2'} nothing special but you may expand it from outside

React.render(<Test1 classNames={{test1: 'out-test1'}} />, document.getElementById('root'))

and you will get in console {test1: 'out-test1 my-test1', test2: 'my-test2'}
also, you may add className via classNames by root option

React.render(<Test1 className='out-test' classNames={{root: 'root-test'}} />, document.getElementById('root'))

the root element will contain out-test root-test and also, you may inherit components with different classNames and get all of them

context

Make inherit to get context

class Theme extends React {
  static context = 'default context'
  render () {
    return (
      <Theme.context value='theme context'>
        {this.children}
      </Theme.context>
    )
  }
}

class Test1 extends Theme {
  render () {
    return this.context
  }
}

React.render(<>
  <Theme><Test1 /></Theme><br />
  <Test1 />
</>, document.getElementById('root'))

private

private is a field which is observable that means all changes have rerender a component

class Timer extends React {
  static props = {
    interval: 1000
  }
  private = {
    count: 0
  }
  componentDidMount () {
    setInterval(() => {
      this.private.count++
    }, this.props.interval)
  }
  render () {
    return this.private.count
  }
}

React.render(<>
  <Timer /><br />
  <Timer interval={100} />
</>, document.getElementById('root'))

each element has own private space

protected

protected is the same as private but the space for all instances of component

class Input extends React {
  static protected = {
    value: ''
  }
  onChange (value) {
    this.protected.value = value
  }
  get value () {
    return this.protected.value
  }
  render () {
    return <input value={this.value} onChange={e => this.onChange(e.target.value)} />
  }
}

React.render(<>
  <Input /><Input /><Input />
</>, document.getElementById('root'))

You may inherit protection

class Class extends React {
  static protected = {
    value: ''
  }
}

class Input extends Class {
  onChange (value) {
    this.protected.value = value
  }
  get value () {
    return this.protected.value
  }
  render () {
    return <input value={this.value} onChange={e => this.onChange(e.target.value)} />
  }
}

class Value extends Class {
  render () {
    return this.protected.value
  }
}

React.render(<>
  <Input /><br />
  <Value />
</>, document.getElementById('root'))

public

public is global space with observation

class Input1 extends React {
  render () {
    return <input value={this.public.value} onChange={e => this.public.value = e.target.value} />
  }
}
class Input2 extends React {
  render () {
    return <input value={this.public.value} onChange={e => this.public.value = e.target.value} />
  }
}

React.render(<>
  <Input1 /><Input2 /><Input1 />
</>, document.getElementById('root'))

localStorage

localStorage is a field like protected but keeps it in local storage of browser, that means you will get the state after page reload

class Input extends React {
  static localStorage = {
    value: ''
  }
  render () {
    return <input value={this.localStorage.value} onChange={e => this.localStorage.value = e.target.value} />
  }
}

React.render(<Input />, document.getElementById('root'))

history

use History API

class Test extends React {
  private = {
    url: ''
  }
  render () {
    return <>
      url: /<input value={this.private.url} onChange={e => this.private.url = e.target.value} />
      <button onClick={() => this.history.push('/' + this.private.url)}>go</button>
      {this.history.steps.map((url, step) => <div key={step} style={{color: this.history.step === step ? 'red' : 'green'}}>{step}. {url}</div>)}
    </>
  }
}

React.render(<Test />, document.getElementById('root'))

async

async field helps with asynchronous operations

class Test extends React {
  static async = {
    someData: resolve => setTimeout(() => resolve('test'), 1000)
  }
  render () {
    return this.async.someData.loading ? 'loading...' : this.async.someData.value
  }
}

React.render(<Test />, document.getElementById('root'))