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

export const uncurry = (fn) => (...args) => {
  let result = fn
  for(i in args){
    result = typeof result === 'function'
      ? result(args[i])
      : result
  }
  return result
}

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

renatorib

const toPairs = obj => Object.keys(obj).reduce((acc, value) => [ ...acc, [value, obj[value]] ], []);

renatorib

import React from 'react';

type Props = {
  isPrimary?: boolean,
  isSecondary?: boolean,
  isHeaderButton?: boolean,
  children: string,
};

const Button = (props: Props) => {