@mazzard/react v1.2.2
#@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'))