JavaScript

CSS-in-JS, a styling technique made easy with React

Text Size
Banner toggles:

What is CSS-in-JS?

CSS-in-JS refers to a collection of ideas for solving complex problems with CSS. It is NOT a particular library, although many might solve a divergent subset of problems and use different approaches, depending on their implementation details.

However, what all implementations have in common, is that they tackle problems using APIs instead of convention and leverage JavaScript as a language for authoring styles.

It also solves problems such as lack of modules, lack of scoping, implicit dependencies and dead code.

Mini form

Please select a state from the list above
Please enter a valid 10 digit mobile number
Please agree to our terms and conditions

Carousel

Some of the configurable options are listed below.

  • Sand dunes of Tatooine
    LEGO Trooper
1/5

Checkbox/Toggle

The Checkbox component can be used in 2 styles, as shown below:

ui = checkbox (default)

ui = toggle

The Grid

React version of Bootstrap v4 grid system.

2 columns (no props)

Col 1
Col 2

3 columns in sm using different orders

1 of 3
2 of 3
3 of 3

5 columns with lg set to true

Col 1
Col 2
Col 3
Col 4
Col 5

2 columns with different config in sm, md and lg

Col 1 (7)(8)
Col 2 (5)(4)

3 column combination config in md

Col 1 (3)
Col 2 (true)
Col 3 (span: 4)

Accordions

One of the most used components to condense a height of a lengthy page. With the configurable option of scrolling to opened

A vertically stacked list of headers which can be clicked to show or hide associated HTML content. It is one of many ways you can expose content to users in a progressive manner.

To provide a good user experience, the HTML content inside an accordion should be limited to text based items such as paragraphs, lists and tables.

The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.

When any accordion header button receives focus:

  • The border encompassing the entire accordion changes color.
  • The text color of the accordion header buttons changes.

This accordion has key board support for the following:

Key(s)Function
Space or EnterWhen focus is on the accordion header of a collapsed section, expands the section.
Tab
  • Moves focus to the next focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab
  • Moves focus to the previous focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow
  • When focus is on an accordion header, moves focus to the next accordion header.
  • When focus is on last accordion header, moves focus to first accordion header.
Up Arrow
  • When focus is on an accordion header, moves focus to the previous accordion header.
  • When focus is on first accordion header, moves focus to last accordion header.

Full list props listed below:

PropTypeDefaultDescription
canScrollToOpenedBooleanfalseScroll page to expanded item
colourStringblueActive accent colour which can be one of blue, green or purple
itemsArray[]Array of Objects with shape:
  • id: unique identifier
  • open: flag to expand item by default
  • title: text of accordion header
  • content: name of component to render

React: refs

Fun with dynamically created refs

Princeton Orange
Aquatic Teal
Electric Purple
Persian Red

DragOverlay

This was one of those components I came across on a few sites and just had to build, for fun!

The component accepts 2 props:

  • imageSrc - background image path
  • positionLeft - initial position of overlay

Card Component

Showcasing different variations and configurations.

Alerts

Display a short and important message.

This is an error message!
This is a warning message!
This is an info message!
This is a success message!

Tabs

The demo below previews the tab component, its variations, and configuration options.

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Each tab should contain content that is distinct from other tabs in the same set. For example, tabs can present different sections of news, different genres of music, or different themes of documents.

Do's:
  • Tab labels can include icons and text. Text labels should be short.
  • Present tabs as a single row above their associated content.
Dont's:
  • Don't use tabs to move through sequential content that needs to be read in a particular order.
  • Avoid using tabs for comparing content across multiple tabs, such as different sizes of the same item.