renatorib

outputs/*
config.js

renatorib

class OnlyInClient extends Component {
  static defaultProps = { fallback: null }
  state = { client: false }
  
  componentDidMount() {
    this.setState({ client: true })
  }
  
  render() {
    if (!this.state.client) {

renatorib

Dan, there are bigger plans to redux this year?

Not sure what you mean 🙂 But I have no plans regarding Redux personally. I'm not actively involved with maintaining it.

---

Andrew Clark said on his Twitter that class components will be considered as legacy APIs in the future, while function components will remain. We must take this statement in consideration in the projects that are under development/will be developed? And what is the best way to write a component?

He also said on Twitter that we have dozens of thousands of class components and they aren't going anywhere 🙂 When/if we have a more convenient and less verbose way to declare components than classes, we'll definitely announce it, but I don't see how it could affect existing projects.

renatorib

// passing object to render with two fns (opener & content, for example)
<Modal>
  {{
    opener: ({ open }) => <button onClick={open}>Open Modal</button>,
    content: {{ close }) => <div><h2>Hi modal</h2> <button onClick={close}>Close me</button></div>
  }}
</Modal>
   
// passing as children array
// https://stackblitz.com/edit/react-array-render-props

renatorib

Drafts

---

Mouse

or MousePos, or MouseTrack, idk what is best name yet

Mouse is binded in a element, and your ratio values are relative to this element.

IDEAL API

renatorib

class ToggleOpened extends Component {
  state = { opened: false }
  
  toggle = () =>
    this.setState(state => ({ opened: !state.opened }))

  render() {
    return this.props.render({
      opened: this.state.opened,
      toggle: this.toggle,

renatorib

<WhatIsTheMeaningOfLife
  context={someInput}
  render={meaningOfLife => (
    <MyBeautifulUI>
      {meaningOfLife}
    </MyBeautifulUI>
  )}
/>

renatorib

const breakpoints = {
  900: { name: 'Tablet' },
  600: { name: 'Mobile' },
}

render(
  <Hello name="Desktop" bps={breakpoints} />,
  document.getElementById('root')
)

renatorib

Render all routes and change class with matchPath:

https://codesandbox.io/s/kRZBG3KKv

Render all routes and change class with Route children:

https://codesandbox.io/s/G5m6r10oL

renatorib

Labels

• I.D: Implementation Difficulty: 0 to 10 where 0 is super easy and 10 is super hard.

Name	Stars	I.D.	Links	Type
react-motion	8,738 ⭐	8	Github	Generic
react-flip-move	1,341 ⭐	0	Github - Example	List