Pagebakers

import { ThemeTypings } from '@chakra-ui/react'

/**
 * Transparentize Chakra UI color tokens
 * @param color - Chakra UI (semantic) token
 * @param opacity - Opacity value 0 to 1.
 */
export const alpha = (color: ThemeTypings['colors'], value: number) => {
  const key = color.replaceAll('.', '-')
  return `color-mix(in srgb, var(--chakra-colors-${key}) ${Math.max(Math.min(value * 100, 100), 0)}%, transparent)`

Grohden

// This is basically a copy of
// https://github.com/nysamnang/react-native-raw-bottom-sheet
// but using only translate animations instead of height

import React, {
    forwardRef, ReactNode,
    RefForwardingComponent,
    useImperativeHandle,
    useState
} from 'react'

HerrBertling

My team found it rather hard to determine which stage to use – or whether it would be easier to stay with a certain stage and enable some features specifically.

So I ended up with a table of postcss-cssnext features, their postcss-preset-env counterparts (where I knew the option name) and the stage for each feature.

• postcss-cssnext features are from the feature documentation page
• Deprecation infos are from the blogpost by @MoOx
• Stages are from the postcss-preset-env feature documentation page
• Option names are from @jonathantneal's comment

Here you go:

garmjs

require('babel-register')
const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const ServerRouter = ReactRouter.ServerRouter
const App = require('./src/App').default
const path = require('path')
const Helmet = require('react-helmet')
const compression = require('compression')

nodkz

import express from 'express';
import { ApolloServer } from 'apollo-server-express';
import { ApolloServerPlugin } from 'apollo-server-plugin-base';
import * as Sentry from '@sentry/node';

Sentry.init({
  environment: process.env.APP_ENV,
  // see why we use APP_NAME here: https://github.com/getsentry/sentry-cli/issues/482
  release: `${process.env.APP_NAME}-${process.env.APP_REVISION}` || '0.0.1',
  dsn: process.env.SENTRY_DSN,

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

pizzarob

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const ANIMATION_DURATION = 1000;

class BatchDropZone extends React.Component {

  static propTypes = {

shprink

import React from 'react';
import {Link as ReactLink} from 'react-router';

export default class Link extends React.Component {
  parseTo(to) {
    let parser = document.createElement('a');
    parser.href = to;
    return parser;
  }
  isInternal(toLocation) {

StevenLangbroek

import express from 'express';
import render from './react';

const app = express();

app.use(render);

rgrove

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

1. Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the