# @mazzard/react

> Mazzard is a full stack framework

Latest version **1.2.2** (published 2019-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mazzard/react
pnpm add @mazzard/react
yarn add @mazzard/react
bun add @mazzard/react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2019-09-22 |
| First published | 2019-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 16.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Deight |
| Maintainers | deight |

## Links

- npm: https://www.npmjs.com/package/@mazzard/react
- Repository: https://github.com/d8corp/mazzard
- Homepage: https://github.com/d8corp/mazzard#readme
- Issues: https://github.com/d8corp/mazzard/issues
- npm.io page: https://npm.io/package/@mazzard/react

## Dependencies (9)

- [mobx](https://npm.io/package/mobx.md) ^5.13.0
- [react](https://npm.io/package/react.md) ^16.8.6
- [core-js](https://npm.io/package/core-js.md) ^2.5.7
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [mobx-react](https://npm.io/package/mobx-react.md) 6.0.4
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.6.0
- [@mazzard/classes](https://npm.io/package/@mazzard/classes.md) ^1.0.0
- [@mazzard/mobx-async](https://npm.io/package/@mazzard/mobx-async.md) ^1.0.0
- [@mazzard/mobx-history](https://npm.io/package/@mazzard/mobx-history.md) ^1.0.0

## Recent versions

- 1.2.2 (latest) — 2019-09-22
- 1.2.1 — 2019-09-22
- 1.1.4 — 2019-09-22
- 1.2.0 — 2019-09-20
- 1.1.3 — 2019-09-10
- 1.1.2 — 2019-09-10
- 1.1.1 — 2019-09-10
- 1.1.0 — 2019-09-10
- 1.0.3 — 2019-09-07
- 1.0.2 — 2019-09-07
- 1.0.1 — 2019-09-07
- 1.0.0 — 2019-09-07
- 0.0.0 — 2019-09-07

## README

#@mazzard/react
### Install
```bash
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](https://github.com/facebook/create-react-app).  
After start a project with [create-react-app](https://github.com/facebook/create-react-app) you may change
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
```
to
```javascript
import React from '@mazzard/react'
``` 
Then you may use `React.render` to put your app in some element like `ReactDOM.render`
```javascript
import React from '@mazzard/react'
import App from './App'

React.render(<App />, document.getElementById('root'))
```
### children
You may get children elements with `this.children`  
```javascript
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
```javascript
class Test extends React {}
React.render((
  <Test>
    <React>test</React>
  </Test>
), document.getElementById('root'))
// test
```
You may use default children with `children` field
```javascript
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
```javascript
React.render((
  <Test>
    {() => 'function children'}
  </Test>
), document.getElementById('root'))
// function children
```
You may get default children in the function
```javascript
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
```javascript
class Test extends React {
  children = () => this.props.value
}
React.render(<Test value='test value' />, document.getElementById('root'))
// test value
```
Heirs overwrite default children
```javascript
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
```javascript
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`
```javascript
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
```javascript
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
```javascript
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
```javascript
class Test extends React {
  className = 'test1'
  render () {
    return this.className
  }
}
React.render(<Test className='test2' />, document.getElementById('root'))
// test2 test1
```
Heirs complement className
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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`
```javascript
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
```javascript
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
```javascript
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
```javascript
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
```javascript
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'))
```

---
_Source: https://npm.io/package/@mazzard/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._