DEV Community: Leo Kalshteyn

Intro to React Helmet

Leo Kalshteyn — Thu, 28 Jan 2021 01:47:16 +0000

I came upon a react component called React Helmet that eases the manageability of a document's head section. It is social media friendly in that it combines server-side rendering and React Helmet itself and makes a dynamic duo for creating apps. React Helmet uses HTML tags and is very simple to use.

Installation

With npm:

$ npm install --save react-helmet

Features

Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
Supports attributes for body, html and title tags.
Supports server-side rendering.
Nested components override duplicate head changes.
Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
Callback for tracking DOM changes.

Example of Use

Import Helmet at the top:

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Nested or latter components will override duplicate changes:

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>

outputs:

<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>

Read more about React Helmet on Github for the full documentation.

References

Sass Intro

Leo Kalshteyn — Wed, 20 Jan 2021 02:28:09 +0000

I recently came upon Sass ('Syntactically Awesome Style Sheets') which is CSS preprocessor that enables you to use things like variables, nested rules, and inline imports in addition to regular CSS. It is an organizational tool used for creating style sheets quicker.

Installation

With npm:

$ npm install -g sass

Usage

There are two types of Syntax for Sass:

SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax
Indented (simply called 'Sass'): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write

Variables

For storing things like colors, font stacks, or any CSS value for reuse, Sass uses the $ symbol for declaring variables. For example, you can store a colour value variable at the top, and then use this variable when setting the colour of your elements for quick and easy colour changes:

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

Sass allows nesting CSS selectors in a way that follows the same visual hierarchy of HTML. Here's an example of some typical navigation styles:

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixins

Mixins simplify tedious CSS code. Group declarations for reusability and vendor prefixes, for example, are possible with mixins. An example of transform:

Sass

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

This is just a brief overview of Sass and its features. On the official site, you can read more documentation on things like partials and operators.

References

Lodash Intro

Leo Kalshteyn — Wed, 13 Jan 2021 00:40:02 +0000

I recently came upon a JS library called Lodash for a small app I am working on which supplies utility functions and readability of objects, arrays, string etc. There are more than 100 functions already added and split into 13 categories which simplify common problems. As hinted by the name, Lodash means, essentially, an underscore

Installation

With npm:

$ npm install lodash

And then import it at the top of your JavaScript file in which you would like to use it.

import _ from Lodash

Usage

Here are some of the functions that Lodash provides:

Map

Iterating over an array of an object with Lodash looks like:

const data = [
  {
    name: 'Bob',
    age: '25',
  },
  {
    name: 'Will',
    age: '24',
  },
  {
    name: 'Mary',
    age: '26',
  }
];

_.map(data, 'name');
// [ 'Bob', 'Will', 'Mary' ]

CloneDeep

This method recursively clones the whole object, so if any property of the resultant object changes, it will not change the original object as the references will also be new.

const users = [
  {
    name: 'Bob', age: '25', profile: { experience: 3 }
  },
  {
    name: 'Will', age: '24', profile: { experience: 2 }
  },
  {
    name: 'Mary', age: '26', profile: { experience: 4 }
  }
];

const usersClone = _.cloneDeep(users);
usersClone[0].age = '27';

usersClone[0].age;
// 27
users[0].age;
// 25

Intersection

In this example you have two separate arrays with different ingredients in each and want to know which ones come up in both.

It would look like this in JS:

let array1 = ["pizza", "icecream", "salads"];
let array2 = ["burger","hotdog", "pasta"];

let commonResults = [];

for (let i = 0; I < array1.length; i++) [
  if (array2.indexOf(array1[i]) !== -1) {
    let indexPosition = array2.indexOf(array1[i]);
    commonResults.push(array2[indexPosition]);
  }
}

console.log(commonResults);

In lodash you can simply do:

console.log(_.intersection(array1, array2));

This is just a brief overview of Lodash and some of its utility functions. On the official site, you can read more documentation.

References

Grommet Intro

Leo Kalshteyn — Tue, 05 Jan 2021 23:57:53 +0000

Grommet is another React component library that centers around modularity and accessibility for building mobile-first apps. One of its defining features is the ability to integrate it with existing projects as well as powerful theming tools for customizing components. Building and designing layouts for different screen displays quickly is quite simple with Grommet as well.

Installation for New Apps

After creating your app remove these files from the 'src' directory:

src/App.css
src/App.test.js
src/index.css
src/logo.svg

Inside src/index.js, remove the import of index.css.

import ReactDOM from 'react-dom';
import './index.css';  //Remove
import App from './App';

Inside src/App.js, remove the logo and the import of app.css

import React from 'react';
import logo from './logo.svg'; //Remove
import './App.css'; //Remove

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />  //Remove
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now Install Grommet

npm install grommet grommet-icons styled-components --save

Then add the import of the Grommet component.

import { Grommet } from 'grommet';

Usually, you should include Grommet only once as one of your top-level nodes.

Replace the main div with Grommet.

<div className="App"> // Remove
<Grommet plain> // Add
  <header className="App-header">
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</Grommet> // Add
</div> // Remove

Now you can start customizing.

Installation for Existing Apps

First, install the packages

npm install grommet styled-components polished --save

Then add the import of the Grommet component.

import { Grommet } from 'grommet';

And now you replace the top-level nodes as in the previous main div example above.

Usage

To make use of Grommet's Box, first import it:

import { Box, Grommet } from 'grommet';

Create an AppBar component and replace the header tag with it.

const AppBar = (props) => (
  <Box
    tag='header'
    direction='row'
    align='center'
    justify='between'
    background='brand'
    pad={{ left: 'medium', right: 'small', vertical: 'small' }}
    elevation='medium'
    style={{ zIndex: '1' }}
    {...props}
  />
);

const App = () => {
  return (
    <Grommet theme={theme}>
      <AppBar>Hello Grommet!</AppBar>
    </Grommet>
  );
}

Changing colors is done in the theme object

const theme = {
  global: {
+   colors: {
+     brand: '#228BE6',
+   },
    font: {
      family: 'Roboto',
      size: '18px',
      height: '20px',
    },
  },
};

Grommet also features the ability to easily declare context-aware colors which automatically adapt to light and dark themes. For example, use a light text color in a dark background, and vice-versa.

This is just a brief overview of Grommet and some of its features. On the official site, you can read more on visualizations, layouts, controls, and more.

References

Intro to Chakra UI

Leo Kalshteyn — Wed, 30 Dec 2020 02:05:41 +0000

Chakra UI is a modular component library that contains a simple API which gives the ability to make apps without having to worry about building the components themselves. It uses Emotion for styling and customization which allows developers to style inside the components with style props. The components are dark mode compatible as well and use a Box and Stack layout.

Installation

In your terminal:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Usage

You also need to setup ChakraProvider in your app's root:

import * as React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App() {
  // 2. Use at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}

For Next.js, you need to set this up in pages/_app.js or pages/_app.tsx
For Gatsby, install the @chakra-ui/gatsby-plugin. It does it automatically for you.
For Create React App, you need to set this up in index.js or index.tsx

Theming Example

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from "@chakra-ui/react"

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

Color Mode Example

ChakraProvider automatically uses color mode when used at the root of the app. By default, most of Chakra's component are dark mode compatible. To handle color mode manually in your application, use the useColorMode or useColorModeValue hooks.

useColorMode:

function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </header>
  )
}

Global Style Example

By using ChakraProvider at the root of your application, we automatically render a GlobalStyle component. It reads the styles defined in theme.styles.global which can be a style object or a function that returns a style object. Then it processes the styles and passes it to the emotion's global component for handling the global style injection.

// 1. Using a style object
const theme = {
  styles: {
    global: {
      "html, body": {
        fontSize: "sm",
        color: "gray.600",
        lineHeight: "tall",
      },
      a: {
        color: "teal.500",
      },
    },
  },
}
// 2. Using a function
// NB: Chakra gives you access to `colorMode` and `theme` in `props`
const theme = {
  styles: {
    global: (props) => ({
      "html, body": {
        fontSize: "sm",
        color: props.colorMode === "dark" ? "white" : "gray.600",
        lineHeight: "tall",
      },
      a: {
        color: props.colorMode === "dark" ? "teal.300" : "teal.500",
      },
    }),
  },
}

This is just a brief overview of Chakra UI and some of its features. On the official site, you can read more on color modes, gradients, global styles, and more.

References

Intro to Evergreen UI

Leo Kalshteyn — Tue, 22 Dec 2020 22:14:57 +0000

Evergreen UI is another React framework that is geared towards web products. It consists of a set of components that work out of the box. Flexible & compostable. Evergreen components are built on top of a React UI Primitive for endless composability. It can also be used for enterprise-grade web apps. Evergreen’s design is light, simple, and intuitive. You can use it to get started building elegant user interfaces pretty quickly.

Installation

In your terminal:

npm install --save evergreen-ui

Usage

Example of an Evergreen UI button

Import the button in the app:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(
  <Button>I am using 🌲 Evergreen!</Button>,
  document.getElementById('root')
)

export default App;

Theming Examples

Wrapping in the ThemeProvider component is required for styling and in order to use the ThemeProvider component, the user must pass it a value prop that is a Theme object.

Here is an example of the ThemeProvider overriding the default styles:

const newTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const ThemedApp = () => (
  <ThemeProvider value={newTheme}>
    <Spinner />
  </ThemeProvider>
)

render(<ThemedApp />)

An example of nested theming where it is possible to theme certain parts of the app differently by nesting the ThemeProvider components.

const parentTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const childTheme = {
  ...defaultTheme,
  spinnerColor: 'blue'
}

const ThemedParent = ({ children }) => (
  <ThemeProvider value={parentTheme}>
    <Spinner />
    { children }
  </ThemeProvider>
)

const ThemedChild = () => (
  <ThemeProvider value={childTheme}>
    <Spinner />
  </ThemeProvider>
)

render(
  <ThemedParent>
    <ThemedChild />
  </ThemedParent>
)

withTheme allows you to easily pass the theme object down to your components.

const theme = {
  ...defaultTheme,
  myNewButtonStyles: {
    color: 'white',
    backgroundColor: 'hotpink',
    height: 30,
    borderRadius: '5px',
  }
}

const ThemedApp = ({ children }) => (
  <ThemeProvider value={theme}>
    { children }
  </ThemeProvider>
)

const MyNewButton = ({ theme }) => (
  <button style={theme.myNewButtonStyles}>
    Custom styled button
  </button>
)

const MyNewThemedButton = withTheme(MyNewButton)

render(
  <ThemedApp>
    <MyNewThemedButton />
  </ThemedApp>
)

This is just a brief overview of Evergreen UI and its theming features. On the official site, you can read more on how to customize components layouts, typography, colors, icons and more.

References

Intro to Fluent UI React

Leo Kalshteyn — Wed, 16 Dec 2020 01:05:27 +0000

I recently read about another interesting UI library called Fluent UI created by Microsoft which offers compatibility with Desktop, Android, and iOS devices. It is essential for apps wit Microsoft Office-like features and UI, having components with behaviors and graphics that resemble it. It fits with Microsoft products and sites like Office, OneNote, Azure DevOps etc.

Fluent UI also comes in two flavors; Fluent UI React and Fabric Core. According to Microsoft, for open-source react front-end framework applications, we can use fluent UI react to build user experience for various Microosft products. Fluent UI core is for non-react applications. It is a collection of CSS classes and Saas mixins, by using which we can access to colors, animations, fonts, icons and grid.

Installation

In your terminal:

npm install @fluentui/react

Usage

Example of a Fluent UI button

Import the Primary button in the app:

import React from 'react';  
import './App.css';  
import { PrimaryButton } from '@fluentui/react';  

function App() {  
  return (  
    <div className="App">  
      <div className="App-header">  
        <PrimaryButton>Button</PrimaryButton>  
      </div>  
    </div>  
  );  
}   

export default App;

Fabric UI React

It is also possible to use Fluent UI with the Fabric Core which provides some react controls like:

Input Controls: Button, ComboBox, Checkbox, Dropdown, ChoiceGroip, Label, SearchBox, TextField, SpinButton, Rating, Toggle, Slider etc.
Galleries & Pickers: Calendar, PeoplePicker, ColorPicker, Pickers, DatePicker, etc.
Items & Lists: ActivityItem, DetailsList, Persona, DocumentCard, Hover Card, Basic List, etc.
Commands, Menus & Navs: Breadcrumb, CommandBar, ContextualMenu, Nav, etc.
Notification & Engagement: MessageBar, TeachingBubble, Coachmark
Progress: ProgressIndicator, Shimmer, Spinner
Surfaces: Callout, Dialog, Modal, Tooltip, ScrollablePane, Panel etc.
Utilities: Icon, Stack, Text, Selection, Separator, Keytips, Image, MarqueeSelection, etc.
Experimental: Card

Example of a Fabric UI Button

Import the button in your app:

Import { DefaultButton, PrimaryButton} from 'office-ui-fabric-react';

And add the buttons <DefaultButton text="Standard" onClick={clickhere} /> and <PrimaryButton text="Primary" onClick={clickhere} />

Example of how it would look like in default React page:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react';

function App() {
    return (
        <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <DefaultButton text="Standard" onClick={clickhere} />
        <br/>
      <PrimaryButton text="Primary" onClick={clickhere} />
      </header>

    </div>
  );   
}

function clickhere() {
    alert('Click Here')
}

export default App;

This is just a brief overview of Fluent UI and its features. On the official site, you can read more on it.

References

Rebass Intro

Leo Kalshteyn — Tue, 08 Dec 2020 23:05:21 +0000

I recently read about an interesting UI library called Rebass for creating set of customizable UI elements which are based on the Styled System library. It gives the ability for React components to render to the canvas rather than the DOM. containing eight foundational components which styled-system, they allow the extension of custom UI components into your app with the ThemeProvider. This also reduces to need to write custom CSS in apps.

Installation

Install the core Rebass library:

npm i rebass

Usage

ThemeProvider

Rebass components are stylistically unopinionated and do not include a theme by default You can add a theme to your application with a ThemeProvider component and by providing a theme in context. This example uses the Emotion ThemeProvider with the Rebass preset theme.

npm i @rebass/preset emotion-theming

Then wrap with the ThemeProvider component:

import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

Theming

You can use the default Rebass theme or completely customize the look and feel with a custom theme. Rebass follows the Theme Specification, so any theme built for use with Theme UI or Styled System will work out-of-the-box.

import React from 'react'
import { ThemeProvider } from 'emotion-theming'
const theme = {
  fontSizes: [
    12, 14, 16, 24, 32, 48, 64
  ],
  colors: {
    primary: '#07c',
    gray: '#f6f6ff',
  },
  buttons: {
    primary: {
      color: 'white',
      bg: 'primary',
    },
    outline: {
      color: 'primary',
      bg: 'transparent',
      boxShadow: 'inset 0 0 0 2px'
    },
  },
}
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

Card Composite Component

Here is an example of a card box component

  <Box width={256}>
    <Card
      sx={{
        p: 1,
        borderRadius: 2,
        boxShadow: '0 0 16px rgba(0, 0, 0, .25)',
      }}>
      <Image src={props.image} />
      <Box px={2}>
        <Heading as='h3'>
          Card Demo
        </Heading>
        <Text fontSize={0}>
          You can edit this code
        </Text>
      </Box>
    </Card>
  </Box>

This is just a brief dive into Rebass. On the official site, you can look at how to customize props, images, buttons etc.

References

Semantic UI React Intro

Leo Kalshteyn — Wed, 02 Dec 2020 00:22:01 +0000

A similar front-end development framework to bootstrap, Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It features pre-built components for creating responsive layouts with user-friendly HTML, JavaScript, and simplified debugging. Besides React it integrates with a number of other frameworks like Angular, Meteor, Ember among others, and organizes UI layers with the app logic.

Installation

As shown on the official site there are two ways to install Semantic UI.

Option 1: With Package Manager:

npm install semantic-ui-react semantic-ui-css

Then import the minified CSS file in your app's entry file:

import 'semantic-ui-css/semantic.min.css'

Option 2: CDN (no bundler)

Add the link and script tag to the head of your index.html file:

<link
  async
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"
/>
<script
  async
  src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"
></script>

Examples of Features

Buttons

There are a wide variety of button types that you can see on the official documentation. Some examples below:

Standard Button:

import React from 'react'
import { Button } from 'semantic-ui-react'

const ButtonExampleButton = () => <Button>Click Here</Button>

export default ButtonExampleButton

Animated Button:

import React from 'react'
import { Button, Icon } from 'semantic-ui-react'

const ButtonExampleAnimated = () => (
  <div>
    <Button animated>
      <Button.Content visible>Next</Button.Content>
      <Button.Content hidden>
        <Icon name='arrow right' />
      </Button.Content>
    </Button>
    <Button animated='vertical'>
      <Button.Content hidden>Shop</Button.Content>
      <Button.Content visible>
        <Icon name='shop' />
      </Button.Content>
    </Button>
    <Button animated='fade'>
      <Button.Content visible>Sign-up for a Pro account</Button.Content>
      <Button.Content hidden>$12.99 a month</Button.Content>
    </Button>
  </div>
)

export default ButtonExampleAnimated

Themes

Another feature of Semantic UI is custom themes. Semantic UI React does not have its own styling system and fully relies on the theming of Semantic UI.

First you would need to remove existing references for semantic-ui & semantic-ui-css package or styles included from CDN to avoid styles duplication.

npm uninstall semantic-ui semantic-ui-css

Then install the required dependencies of for example @craco/craco:

npm install @craco/craco @semantic-ui-react/craco-less semantic-ui-less --save-dev

After that, update your package.json:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }
}

And create craco.config.js

module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}

There is a tool CLI tool that will copy necessary files with the skeleton of your customization.

npx @semantic-ui-react/bootstrap

Edit the semantic-ui/theme.config with:

/*******************************
            Folders
*******************************/

@themesFolder : 'themes';
@siteFolder  : '../../src/semantic-ui/site';

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : '../../../themes/@{theme}/assets/fonts';

Finally, import the semantic.less file in index.js

import 'semantic-ui-less/semantic.less'

Now it is possible to add color or background for example by editing the src/semantic-ui/site/globals/site.variables file:

@primaryColor: #002f4e;
@pageBackground: #eff0f1;

This is just a brief intro to Semantic UI React and what you can do with it. On the official site, you can look at how to utilize it to make cards, lists, modals among other things.

References

Blueprint UI Intro

Leo Kalshteyn — Wed, 25 Nov 2020 01:28:46 +0000

Blueprint is another React UI toolkit that is optimized for building complex, data-dense web interfaces for desktop applications. Part of its aim is to keep things flexible by being reusable and focuses on composition, allowing Blueprint components to be composed to create higher-level structures. It also has a distinguishable content and color perception, allowing contrast and colors, including those that are accessible to colorblind users.

Installation

Run in your react app:

npm install @blueprintjs/core

Blueprint must be installed with react and react-dom since its additional packages have peer dependencies to these packages.

Usage

To import React components in your app:

import { Button, Intent, Spinner } from "@blueprintjs/core";

// using JSX:
const mySpinner = <Spinner intent={Intent.PRIMARY} />;

// use React.createElement if you're not using JSX.
const myButton = React.createElement(Button, { intent: Intent.SUCCESS }, "button content");

You need to also include the main CSS file from each Blueprint package. Additionally, the resources/ directory contains supporting media such as fonts and images.

Example using node packaging in CSS file:

@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

Example of a card component:

import React from 'react';
import "@blueprintjs/core/lib/css/blueprint.css"
import { Button, Card, Classes } from "@blueprintjs/core";


const Blueprint = () => (
<Card style={{width: 300}} className={Classes.CARD}>
    <h3>Blueprint card</h3>
    <p>Text</p>
    <Button intent="primary" text="Read more" className={Classes.BUTTON} />
</Card>
  );

export default Blueprint;

This is just a glimpse of the Blueprint UI and what you can do with it. It is optimized for data-dense interfaces and while you cannot use its full potential for web apps, it is still a good component library for React apps overall.

References

React-Select Intro

Leo Kalshteyn — Wed, 18 Nov 2020 01:19:28 +0000

I have read about a simple React library which offers flexibility and easy to use input control for your apps, with features like multi-select, autocomplete, and async.

A flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete, async and creatable support.

Some Features

Flexible approach to data, with customizable functions
Extensible styling API with emotion
Component Injection API for complete control over the UI behavior
Controllable state props and modular architecture
Long-requested features like option groups, portal support, animation, and more

Installation

npm install react-select

Usage

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'blues', label: 'Blues' },
  { value: 'rock', label: 'Rock' },
  { value: 'jazz', label: 'Jazz' },
  { value: 'orchestra' label: 'Orchestra' } 
];

class App extends React.Component {
  render(){
    return (
      <Select options = {options} />
    );
  }

In the above example, import the react-select package in App.js
This gives access to the react-select ( ) and also extends the React.Component class. The options and values are passed in as props.

Props

state = {
  selectedOption: null,
}
handleChange = (selectedOption) => {
  this.setState({ selectedOption });
  console.log(`Option selected:`, selectedOption);
}
render(){
  const { selectedOption } = this.state;
}

return (
  <S

Here is an example of how some props are used to customize the functionalities of the select component.

The state manager prop onChange gets the information about the current select item. For example, if you select rock as an option in the console, you'll get something like Option selected: {value:"rock", label: "Rock"} which is useful for manipulating the data gotten from our select component. Other props seen are the options and autoFocus props. The options prop is used to pass in select options to the select component, which in this case are the music genres. The autoFocus prop which has a data type of boolean is used to add autoFocus to the select component on page load.

Here is a list of some common props:

autoFocus - focus the control when it mounts
className - apply a className to the control
classNamePrefix - apply classNames to inner elements with the given prefix
isDisabled - disable the control
isMulti - allows the user to select multiple values
isSearchable - allows the user to search for matching options
name - generate an HTML input with this name, containing the current value
onChange - subscribe to change events
options - specify the options the user can select from
placeholder - change the text displayed when no option is selected
value - control the current value

Check out the props documentation for more.

There are other features such as async, animated components, and custom components that you can see in the documentation on the official site. It really is a handy tool.

References

Intro to Apollo Client

Leo Kalshteyn — Wed, 11 Nov 2020 01:04:16 +0000

I came upon something called Apollo while building a simple ecommerce react app. For the backend product data, I decided to use graphql to easily fetch and modify data. And that's when I discovered this Apollo library which combines both React integration and GraphQL. It makes working with React and GraphQL a lot easier by giving lots of custom React hooks and features that enables the writing of GraphQL operations and executing them with JavaScript code.

Some Features

Declarative data fetching: Write a query and receive data without manually tracking loading states.
Excellent developer experience: Enjoy helpful tooling for TypeScript, Chrome DevTools, and VS Code.
Designed for modern React: Take advantage of the latest React features, such as hooks.
Incrementally adoptable: Drop Apollo into any JavaScript app seamlessly.
Universally compatible: Use any build setup and any GraphQL API.

Installation

npm install @apollo/client graphql

@apollo/client: This package contains the main Apollo client with all essential features.
graphql: This package provides logic for parsing GraphQL queries.

Usage

You connect Apollo Client to React with the ApolloProvider component. The ApolloProvider is similar to React's Context.Provider. It wraps your React app and places the client on the context, which enables you to access it from anywhere in your component tree.

In your app's index.js, wrap the React app with an ApolloProvider. It is advisable to put ApolloProvider above any component that might need to access GraphQL data. For example, it could be outside of your root route component if you're using React Router.

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/client';

function App() {
  return (
    <ApolloProvider client={client}>
      <div>
        <h2>My first Apollo app 🚀</h2>
      </div>
    </ApolloProvider>
  );
}

render(<App />, document.getElementById('root'));

Requesting Data with useQuery

After hooking up ApolloProvider, you use the useQuery hook for passing the GraphQL query. useQuery is a React hook that uses the Hooks API to share GraphQL data with your UI. When your component renders and the useQuery hook runs, a result object is returned that contains loading, error, and data properties:

Apollo Client tracks error and loading state for you, which are reflected in the loading and error properties.
When the result of your query comes back, it's attached to the data property.

Example of useQuery being used with an ExchangeRates component in index.js:

import { useQuery, gql } from '@apollo/client';

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

There are more things the Apollo Client can do like fetch queries with arguments and configuring. As well as updating data with mutations and Apollo cache. Check out the references for more in-depth information and tutorials.

References