React

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

We use React for web/desktop and React Native for Mobile Applications at Lucky Media.

Websites#

For websites we have a great starter based on Next.js - Next Starter.

The Starter its a great boilerplate to get you up and running with the following features:

• TailwindCSS
• Self Hosted Google Fonts with FontSource
• Prettier and Eslint
• Husky with Pre-commit hooks to lint and fix
• Layout Component with working responsive Menu
• React Inline SVG is used to render svg-s.
• JS Config aliases

Components#

We encourage small and composable Components to be used in conjunction with Tailwind in order to build a robust UI.

Example Text Component with React:

import React from 'react'

const Paragraph = ({ children, className, ...props }) => {
    return (
    <p {...props} className={`font-medium text-base text-gray-200 ${className}`}>
      {children}
    </p>
    )
}

Example Button component with multiple variants and sizes:

import React, { forwardRef } from 'react'
import { cls } from '../utils/helpers'

const classes = {
    base: 'focus:outline-none transition ease-in-out duration-300',
    disabled: 'opacity-50 cursor-not-allowed',
    pill: 'rounded-full',
    size: {
        small: 'px-2 py-1 text-sm',
        normal: 'px-4 py-2',
        large: 'px-8 py-3 text-lg'
    },
    variant: {
        primary: 'bg-blue-500 hover:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-white',
        secondary: 'bg-gray-200 hover:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 text-gray-900 hover:text-white',
        danger: 'bg-red-500 hover:bg-red-800 focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 text-white'
    }
}

const Button = forwardRef(
    (
        {
            children,
            type = 'button',
            className,
            variant = 'primary',
            size = 'normal',
            pill,
            disabled = false,
            ...props
        }, ref
    ) => (
        <button
            ref={ref}
            disabled={disabled}
            type={type}
            className={cls(`
                ${classes.base}
                ${classes.size[size]}
                ${classes.variant[variant]}
                ${pill && classes.pill}
                ${disabled && classes.disabled}
                ${className}
            `)}
            {...props}
        >
            {children}
        </button>
    ));

export default Button

cls is a function that trims the whitespace and renders the classes nicely. Here its the code of the function:

export const cls = (input) =>
    input
        .replace(/\s+/gm, " ")
        .split(" ")
        .filter((cond) => typeof cond === "string")
        .join(" ")
        .trim();