jaredpalmer / awesome-react-render-props Goto Github PK

Hi all,

I have two examples with render props and don't know What is the best way? Why? Different?

Example 1:

// Layout.jsx
const Layout = ({ children, aside }) => (
  <div>
      <header>My header</header>
      {aside}
      <main>
          {children}
      </main>
  </div>
);

// user.js
import Aside from './components/Layout';

const User = () => (
  <Layout aside={<Aside />}>
      My user page
  </Layout>
);

Example 2:

// Layout.jsx
const Layout = ({ children, aside: Aside }) => (
  <div>
      <header>My header</header>
      <Aside />
      <main>
          {children}
      </main>
  </div>
);

// user.js
import Aside from './components/Layout';

const User = () => (
  <Layout aside={Aside }>
      My user page
  </Layout>
);

Thank in advance!

Looking through the list, the order libraries are listed seems a bit random.
Would it make sense to go through the list and sort them by name?

Hi friends. Just letting you know I'm trying to slim down my notifications, so I'm no longer going to help maintain this. Sorry.

Looking through the "Misc" category I see opportunities for new categories.

State

• react-value: An easy easy way to wrap controlled components that provide value and onChange props with state.
• react-redux-local: Simple local reducer with middleware/sagas/redux-dev-tools support.
• redux-render: Ergonomic Redux bindings for React using render props
• unstated: Share state between components with the same statefu
• react-gizmo: UI Finite State Machine for React

Alternatively the above could be merged into "Data".

Composition

• react-powerplug: Renderless Pluggable State Containers
• react-adopt: 😎 Compose render props components like a pro.
• react-composer: Compose render prop components
• @danwang/retainer: Compose render prop components by lifting computation into containers

Media

• react-power-picture: Progressively load an image srcset for maximum responsiveness and performance
• react-with-async-fonts: Module for dealing with custom web fonts
• react-progressive-image: React component for progressive image loading

Timing

• react-loads: A simple React component to handle loading state
• react-sentinel: Abstracts away requestAnimationFrame, allowing you to poll anything for props
• react-pro-metronome: React component for creating your own metronome
• react-t-minus: A React component to handle simple countdowns.

This would then result in misc only containing the following:

• react-pledge: Declarative way to track promise lifecycle states using "render props" 🕶
• react-device-battery: 🔋 Notifies your React App of the device battery status
• react-geolocation: Declarative geolocation in React
• react-albus: React component library for building declarative multi-step flows (wizards).
• @tedconf/react-show-more: A Unopinionated component to handle showing more items
• react-treefold: A renderless tree component for your hierarchical React views
• react-google-calendar-events-list: React component which retrieves events from a google calendar.
• react-google-maps-loader: Simple loader to use google maps services
• react-render-fam: Lit components for conditional rendering in React

It would be nice to have a render prop version for that use case.

I found the following libs:

• https://github.com/glortho/react-keydown
• https://github.com/greena13/react-hotkeys

Both are using a different way of handling this. Some ideas would be great!