Skip to content

Instantly share code, notes, and snippets.

Avatar
🐶

François Robichet Calvein

🐶
View GitHub Profile
@Calvein
Calvein / index.js
Created Oct 25, 2018
Toggle component usage
View index.js
let Component = () => {
return (
<>
<Toggle defaultIsOn>
{({ isOn, toggle }) => (
<button onClick={toggle}>
is {isOn ? 'on' : 'off'}
</button>
<Modal isOpen={isOn}>
Hello
@Calvein
Calvein / declarative.js
Created Sep 11, 2018
Custom Dropdown react component API
View declarative.js
<Dropdown
trigger={({ toggle }) => (
<Button
isDropdown
icon={<IconDecoration />}
iconActive={<IconDecorationFill />}
onClick={toggle}
>
Decoration
</Button>
View react-redux-architecture.md

React/Redux architecture

Tools

  • [Visual Studio Code]: For its [TypeScript] integration
  • [TypeScript]: Which can also replace React's PropTypes
  • [Create React app]: For a PoC or a small project, you can easily [use TypeScript following this guide]
  • [Storybook]: To develop your component standalone, see Storybook-driven development
  • [Babel]
  • [Webpack]
@Calvein
Calvein / config
Created Jan 30, 2017
Polybar config
View config
[colors]
background = #1b2b34
foreground = #d8dee9
transparent = #00ffffff
base08 = #ec5f67
red = #ec5f67
base09 = #f99157
orange = #f99157
base0a = #fac863
View .Xresources
#define S_base03 #002b36
#define S_base02 #073642
#define S_base01 #586e75
#define S_base00 #657b83
#define S_base0 #839496
#define S_base1 #93a1a1
#define S_base2 #eee8d5
#define S_base3 #fdf6e3
*background: S_base03
@Calvein
Calvein / ces_theme.json
Created Jan 16, 2017
Fixed codepen Solarized Light
View ces_theme.json
{"elements":[{"prettyName":"Background","selector":".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor","color":"#fdf6e3","description":false,"prop":"background"},{"prettyName":"Cursor","selector":".CodeMirror-cursor","color":"#657b83","description":false,"prop":"border-left-color"},{"prettyName":"Default","selector":".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre","color":"#657b83","description":"when nothin' else applies","prop":"color"},{"prettyName":"Keyword","selector":".cm-keyword","color":"#268bd2","description":"e.g. var, function","prop":"color"},{"prettyName":"Atom","selector":".cm-atom","color":"#859900","description":"used for some CSS values and JS primitives (e.g. null, undefined)","prop":"color"},{"prettyName":"HTML Atom","selector":".box-html .cm-atom","color":"#cb4b16","description":"e.g. HTML entities","prop":"color"},{"prettyName":"Definition","selector":".cm-def","color":"#b58900","description":"e.g. @inclu
@Calvein
Calvein / ces_theme.json
Created Jan 16, 2017
Fixed codepen Solarized Dark
View ces_theme.json
{"elements":[{"prettyName":"Background","selector":".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor","color":"#002b36","description":false,"prop":"background"},{"prettyName":"Cursor","selector":".CodeMirror-cursor","color":"#839496","description":false,"prop":"border-left-color"},{"prettyName":"Default","selector":".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre","color":"#839496","description":"when nothin' else applies","prop":"color"},{"prettyName":"Keyword","selector":".cm-keyword","color":"#268bd2","description":"e.g. var, function","prop":"color"},{"prettyName":"Atom","selector":".cm-atom","color":"#859900","description":"used for some CSS values and JS primitives (e.g. null, undefined)","prop":"color"},{"prettyName":"HTML Atom","selector":".box-html .cm-atom","color":"#cb4b16","description":"e.g. HTML entities","prop":"color"},{"prettyName":"Definition","selector":".cm-def","color":"#b58900","description":"e.g. @inclu
@Calvein
Calvein / index.styl
Created Oct 4, 2016
Shadow on scroll for list with a scrollbar
View index.styl
$scroll-shadow
background linear-gradient(white 30%, rgba(black, 0)),
linear-gradient(rgba(black, 0) 10px, white 70%) bottom,
radial-gradient(at top, rgba(black, 0.2), transparent 70%),
radial-gradient(at bottom, rgba(black, 0.2), transparent 70%) bottom
background-repeat no-repeat
background-size 100% 20px, 100% 20px, 100% 10px, 100% 10px
background-attachment local, local, scroll, scroll
@Calvein
Calvein / components.styl
Last active Sep 6, 2016
Stylus style for react-select (assuming autoprefixer too)
View components.styl
@require 'control'
@require 'menu'
@require 'mixins'
@require 'multi'
@require 'spinner'
@Calvein
Calvein / data.json
Last active Dec 8, 2015
Get pictures and info of Australia's MPs
View data.json
[
{
"name": "Tony Abbott",
"img": "http://parlinfo.aph.gov.au/parlInfo/download/handbook/allmps/EZ5/upload_ref_binary/EZ5.JPG",
"electorate": "Warringah",
"state": "New South Wales"
},
{
"name": "Anthony Albanese",
"img": "http://parlinfo.aph.gov.au/parlInfo/download/handbook/allmps/R36/upload_ref_binary/R36.jpg",