renatorib

import React from 'react';

type Props = {
  type?: 'normal' | 'outline',
  radius: 'square' | 'round' | 'circle',
  size?: 'mini' | 'small' | 'normal' | 'large' | 'xlarge',
  theme?: 'primary' | 'grey' | 'danger' | 'warning' | 'success' | 'info',
  className?: string, // ever allow pass custom className
  style?: string, // custom styles also
  children: string,

renatorib

import React from 'react';

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

const Button = (props: Props) => {

renatorib

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

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

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

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

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

renatorib

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

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

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

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