A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js. You can add useful, highly-demands front-end development tools and libraries as a plugin by using superplate CLI during the project creation phase. To learn …
React-use is the package that provides many useful react hooks that we can use to build the UI more efficiently. It provides the hooks related sensors, ui, animations, side-effects, lifecycles, state and etc. Sensors useBattery — tracks device battery state. useGeolocation — tracks geo location state of user’s device. useHover and useHoverDirty — tracks mouse hover state of some element. …
Mapbox GL is a suite of open-source libraries for embedding customizable and responsive client-side maps in web, mobile, and desktop applications. Mapbox GL maps render at a high frame rate. The abbreviation “GL” comes from OpenGL, the industry-standard Open Graphics Library. Mapbox GL allows you to use custom styles designed in Mapbox Studio. You can also manipulate every aspect of …
Remotion is a suite of libraries building a fundament for creating videos programmatically using React. Why create videos in React? Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc. Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem Example videos …
Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents. Originally inspired by Salesforce Theo. Figmagic promotes a structured way of assembling design systems. Following the primary principle of atomic design, Figmagic wants you to build from the bottom up, beginning with decomposing the tokens. Tokens shape elements, which form components, …
Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations. Yup’s API is heavily inspired by Joi, but leaner and built with client-side validation …
TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript (ES5, ES6, ES7, ES8). Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses …
useMedia React sensor hook that tracks state of a CSS media query. Depending on your testing setup, you may need to mock window.matchMedia on components that utilize the useMedia hook. import useMedia from ‘use-media’;// Alternatively, you can import as:// import {useMedia} from ‘use-media’;const Demo = () => { // Accepts an object of features to test const isWide = useMedia({minWidth: …
REACT PRIMITIVE UI COMPONENTSBUILT WITH STYLED SYSTEM Getting Started Install the core Rebass library. npm i rebass ThemeProvider By default, Rebass components are stylistically unopinionated and do not include a theme. You can add a theme to your application with a ThemeProvider component and by providing a theme in context. For this guide, use the Emotion ThemeProvider with the …