Skip to content

Instantly share code, notes, and snippets.

@Alexandre-Herve
Alexandre-Herve / typesafe-routes-proxy.ts
Last active September 20, 2022 18:51
A Typesafe version of @denisborovikov's routes proxy wrapper
// Tweaked from https://gist.github.com/denisborovikov/3e6e772d9d1897c150639872467d214f
const routes = {
home: '/',
transactions: '/transactions',
transactionDetails: '/transactions/:uuid/:optional?',
transfer: '/transfer/:type(bank|card)?/:id?'
} as const // prevents Typescript from widening the path types to string.
type Routes = typeof routes;
const createLogger = (backgroundColor, color) => {
const logger = (message, ...args) => {
if (logger.enabled === false) {
return;
}
console.groupCollapsed(
`%c${message}`,
`background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
...args
// handy method to create a Higher Order Component out of a
// Render Prop Component (like a Context.Consumer).
// handles, statics, displayName, refs, and value forwarding
function createHOCFromRenderProp({prop, Consumer}) {
return Component => {
function Wrapper(props, ref) {
return (
<Consumer>
{value => <Component {...{...props, [prop]: value, ref}} />}
@istarkov
istarkov / 00 README.md
Last active April 2, 2024 20:18
How to style React components

How to style React components

If you use sass and css-modules and want to restyle some base component without changing its code. (base component already use css-modules and exposes styles property)

I know two way how to do it.

  1. Using composes css-modules operator. Just extend classes you need, then in javascript code combine both styles as {...baseStyle, ...myStyleSimple}