React Snippets @ReactSnippets

Snippets in React, from basics to complex it's all about finding beauty in the code. Joined August 2020

Tweets

34
Followers

23
Following

123
Likes

25

React Snippets @ReactSnippets

5 years ago

Anonymous authentication with @MongoDB & @realm: const login = await() => { const app = new Realm.App({ id: "APP_ID" }) const credentials = Realm.Credentials.anonymous() const user: Realm.User = await app.logIn(credentials) } #100DaysOfCode #TypeScript

0 1 4 0 0

React Snippets @ReactSnippets

5 years ago

Inserting one document with @MongoDB & @realm import * as Realm from "realm-web" const mongo = app.services.mongodb("myCluster") const col = mongo.db("myDB").collection("myCol") col.insertOne({ attribute: "value" }) #100DaysOfCode #noBackend #serverless #CodeNewbies

0 4 0 0 0

Diana Smith Flores @cyanharlow

5 years ago

New Pure CSS/HTML drawing. Made for Chrome. And this one you can alter without even using DevTools! No JS, no SVG. Inspired by video game character customization screens, and 90s couture. diana-adrianne.com/purecss-charac…

79 339 2K 0 122

Download Gif

React Snippets @ReactSnippets

5 years ago

Format dates in a readable compact text with #TypeScript: const formatData = (time: string) => new Date(time) .toString() .substring(0, 24) .replace(/2020/, '') #hourofcode #programming #CodeNewbie #WomenInSTEM #100DaysOfCode #PrimeDay2020 #js #DEVCommunity

0 7 4 0 0

Download Image

React Snippets @ReactSnippets

5 years ago

const tsThought = myThoughts.find(({ language }) => language === #TypeScript ) const engThought = myThoughts.find(({ language }) => language === #English ) tsThought.clarity > engThought.clarity // true #softwaredevelopment #100DaysOfCode #DEVCommunity #WomenWhoCode

0 5 6 0 0

JavaScript➕Coffee🦙Faye 🇺🇦 @JavaScriptCoff1

5 years ago

Stop overthinking that variable name. Call it Bob for now. You can change it later... ...or save yourself that hassle and just give it a short but descriptive name

29 6 158 0 1

React Snippets @ReactSnippets

5 years ago

Transforming #csv to #json const { promises: fs } = require('fs') const csv = require("csvtojson") const parse = async() => { const data = await csv().fromFile(csvFile) fs.writeFile(jsonFile, JSON.stringify(data)) return } #100DaysOfCode #code #codeNewbie #womenintech

0 3 2 0 0

React Snippets @ReactSnippets

5 years ago

Stacked bar chart with #reactjs, #TypeScript & #recharts. <BarChart data={tweets}> { stats.map(s => <Bar dataKey={s} stackId="a" fill={colorMapper(s)} /> )} <CartesianGrid /> <XAxis /> <YAxis /> <Tooltip/ > </BarChart> #100DaysOfCode #FrontEnd

0 4 5 0 0

Download Image

React Snippets @ReactSnippets

5 years ago

Graphing charts with #ReactJS #TypeScript & #recharts <LineChart data={data}> { metrics.map((m, i) => <Line type='monotone' dataKey={m} stroke={colorMap(m)} />)} <CartesianGrid/> <XAxis/> <YAxis /> <Tooltip/> </LineChart> #100DaysOfCode #js #FrontEnd

3 8 4 0 0

Download Image

React Snippets @ReactSnippets

5 years ago

Using position absolute for #ReactJS Dashboards. <p> 27 <span style={{ position: 'absolute' }}> 0.4 </span> <span style={{ position: 'absolute', marginTop: 20 }}> 0.1% </span> </p> #100DaysOfCode #TypeScript #softwaredevelopment #programmig

0 8 11 0 0

Download Image

React Snippets @ReactSnippets

5 years ago

Modal with #Bulma, #ReactJS & #TypeScript interface iModal { isActive: boolean, children: any } const Modal = ({ isActive, children }: iModal) => <div className={`modal ${isActive ? 'is-active' : ''}`} > { children } </div> #100DaysOfCode #FrontEnd #Software #programming

0 13 8 0 0

React Snippets @ReactSnippets

5 years ago

Sorting an array of objects by a property called name: const sortedName = persons.sort( ({ name: a }, { name: b }) => a > b ? 1 : -1 ) Ordenando un arreglo de objectos usando la propiedad "name". #100DaysOfCode #TypeScript #js #reactjs #programming #programacion #Software

0 7 3 0 0

React Snippets @ReactSnippets

5 years ago

const wordCounter = sentences.reduce((d, i) => [...d, ...i.split(' ')], [] as string[] ).reduce((d, i) => ({ ...d, [i]: d[i] + 1 || 1 }), {} as { [key: string]: number } ) #100DaysOfCode #TypeScript #js #reactjs #programming #programacion #coders

0 6 2 0 0

Michael Feldstein @msfeldstein

5 years ago

We're looking for a product designer to help us build the figma editor. It's a great role for "an engineer with strong design skills or a designer who was once an engineer". Come work on a great product with great people. jobs.lever.co/figma/491848e6… Lots of other roles too