Skip to content

Instantly share code, notes, and snippets.

@yogibaba
yogibaba / README.md
Created August 12, 2021 10:46 — forked from csandman/README.md
Chakra UI React Select

Chakra React Select

In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme or the components could break this implementation. There are also a few extra things you can do with this wrapper that pull from the chakra library.

  • You can pass the size prop with either sm, md, or lg. These will reflect the sizes available on the Chakra <Input /> component (with the exception of xs because it's too small to work).
  • In your options objects, you can add the key isFixed to emulate the example in the react-select docs.
  • You can pass the colorScheme prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in [the Chakra docs](https://
{
"success": true,
"data": {
"id": "5cd996b26173c13d3800008e",
"name": "Attach",
"tabs": [
{
"display_id": 0,
"name": "Note",
"key": "Note",
@yogibaba
yogibaba / service-workers.md
Created April 21, 2017 16:27 — forked from Rich-Harris/service-workers.md
Stuff I wish I'd known sooner about service workers

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

@yogibaba
yogibaba / repeat_promise.js
Created April 5, 2017 02:23 — forked from tweinfeld/repeat_promise.js
Repeat a promise-generating function until resolution
function repeatPromise(func, attempts = 10, delay = 1000) {
let attemptNumber = 0;
return (function internalTry() {
attemptNumber++;
if (attemptNumber > attempts) {
return Promise.reject('Number of attempts exceeded');
} else {
return func().catch(() => new Promise((resolve) => setTimeout(resolve, delay)).then(internalTry));
}
})();
@yogibaba
yogibaba / note.md
Created February 24, 2016 04:25 — forked from yang-wei/note.md
Vue.js tips and tricks

Notes: All the examples below are only tested on Vue.js 1.0 (above).

Notes: The examples below use ES6 so it's recommended to use browserify or webpack to easily integrate babel.

when or where can we use this.$el

When you need to access DOM attribute, be careful with the lifecycle. Vue.js has a few useful lifecycle hooks.

Let's say we want to scroll our component to the bottom (imagine it's a long list with overflow-y: auto) once it's instantiate.