Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. React Simple Animate
React UI animation made easy. Animation from style A to B,CSS keyframes animation, Chain up animation sequences and a tiny size without other dependency
beekai-oss
/
react-simple-animate
π― React UI animation made easy
React Simple Animate
React UI animation made easy
Features
- Animation from style A to B
- CSS keyframes animation
- Chain up animation sequences
- Tiny size without other dependency
Install
$ npm install react-simple-animate
Quickstart
Components
import React from "react";
import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";
export default () => (
<>
{/* animate individual element. */}
<Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
<h1>React simple animate</h1>
</Animate>
{/* animate keyframes with individual element. */}
<AnimateKeyframes
play
iterationCount="infinite"
keyframes={["opacity: 0", "opacity: 1"]}
>
<h1>React simple animate with keyframes</h1>
<β¦2. Hookstate
The simple but very powerful and incredibly fast state management for React that is based on hooks
avkonst
/
hookstate
The simple but very powerful and incredibly fast state management for React that is based on hooks
Hookstate
The most straightforward, extensible and incredibly fast state management that is based on React state hook
Why? β’ Docs / Samples β’ Demo application β’ Extensions β’ Release notes
Preface
Hookstate is a modern alternative to Redux, Mobx, Recoil, etc. It is simple to learn, easy to use, extensible, very flexible and capable to address all state management needs of large scalable applications. It has got impressive performance and predictable behavior.
Any questions? Just ask by raising a GitHub ticket.
Why Hookstate
Migrating to version 4
hookstate.js.org/docs/migrating-to-v4
Documentation / Code samples / Demo applications
hookstate.js.org/docs/getting-started
Demo application
- Running: https://hookstate.js.org/docs/getting-started
- Source code: https://github.com/avkonst/hookstate/tree/master/docs/demos/todolist
Development tools
hookstate.js.org/docs/devtools
Plugins / Extensions
hookstate.js.org/docs/extensions-overview
API reference
hookstate.js.org/docs/typedoc-hookstate-core
Hookstate developers workflow
This is the mono repository, which combine the Hookstate core package, extensions, docs and demo applications. pnpm is used as node_modules manager and nx as a scripts launcher. Each package defines its ownβ¦
3. rich-markdown-editor
A React and Prosemirror based editor that powers Outline and can also be used for displaying content in a read-only fashion. The editor is WYSIWYG and includes formatting tools whilst retaining the ability to write markdown shortcuts inline and output plain Markdown.
outline
/
rich-markdown-editor
The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
rich-markdown-editor
A React and Prosemirror based editor that powers Outline and can also be used for displaying content in a read-only fashion The editor is WYSIWYG and includes formatting tools whilst retaining the ability to write markdown shortcuts inline and output plain Markdown. See the Live demo storybook.
Important Note: This project is not attempting to be an all-purpose Markdown editor. It is built for the Outline knowledge base, and whilst others are welcome to fork or use this package in your own products, development decisions are centered around the needs of Outline.
Usage
Install
yarn add rich-markdown-editor
or
npm install rich-markdown-editor
Note that react, react-dom, and styled-components are required peer dependencies.
Import
import Editor from "rich-markdown-editor";
<Editor
defaultValue="Hello world!"
/>
Clone this repo and run the Storybook with yarn start to see a wide variety of example usage.
Props
id
β¦4. Fabric.js
Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.
Fabric.js
A simple and powerful Javascript HTML5 canvas library.
Features
- Out of the box interactions such as scale, move, rotate, skew, group...
- Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
-
JPG,PNG,JSONandSVGi/o - Typed and modular
- Unit tested
Supported Browsers/Environments
| Context | Supported Version | Notes |
|---|---|---|
| Firefox | βοΈ | 58 |
| Safari | βοΈ | 11 |
| Opera | βοΈ | chromium based |
| Chrome | βοΈ | 64 |
| Edge | βοΈ | chromium based |
| Edge Legacy | β | |
| IE11 | β | |
| Node.js | βοΈ | Node.js installation |
Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
Installation
$ npm install fabric --save
// or
$ yarn add fabric
Browser
See browser modules for using es6 imports in the browser or use a dedicated bundler.
Node.js
β¦5. TailwindCSS
A utility-first CSS framework for rapidly building custom user interfaces.
tailwindlabs
/
tailwindcss
A utility-first CSS framework for rapid UI development.
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.
6. CASL
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
stalniy
/
casl
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
CASL
Do you like this package?
CASL (pronounced /ΛkΓ¦sΙl/, like castle) is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access. It's designed to be incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization. It makes it easy to manage and share permissions across UI components, API services, and database queries.
Heavily inspired by cancan.
Features
- Versatile An incrementally adoptable and can easily scale between a simple claim based and fully featured subject and attribute based authorization.
- Isomorphic Can be used on frontend and backend and complementary packages make integration with major Frontend Frameworks and Backend ORMs effortless
- TypeSafe Written in TypeScript, what makes your apps safer and developer experience more enjoyable
- Tree shakable The core is only 6KB mingzipped and can be even smaller!
- Declarative Thanks toβ¦
7. React Static Tweets
Extremely fast static renderer for tweets.
transitive-bullshit
/
react-static-tweets
Extremely fast static renderer for tweets.
Deprecation Notice
Vercel released react-tweet which is a better maintained version of this library. Please use that instead.
React Static Tweets
Extremely fast static renderer for tweets.
Demo
Visit react-static-tweets.vercel.app and append your tweet ID. You can also append /dynamic/<tweetId> if you want to test the non-SSR version.
Why?
Twitter's embedding SDK is horribly slow and inefficient. For embedding tweets on your site (including SSR), this solution is significantly more performant. π₯
This project takes Vercel's work on static tweet rendering and packages it up into two easy-to-use NPM packages.
Features
- β‘ Fast - 10-100x faster than using Twitter's iframe embedding.
- π₯ Solid - Used in production by super.so, react-notion-x, and others.
- π Simple - TypeScript + React.
Install
npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns
Note: this project currently only works with Next.js (see #2 for more info).
Usage
You'll need toβ¦
8. bcrypt.js
Optimized bcrypt in plain JavaScript with zero dependencies.
bcrypt.js
Optimized bcrypt in JavaScript with zero dependencies. Compatible to the C++ bcrypt binding on node.js and also working in the browser.
Security considerations
Besides incorporating a salt to protect against rainbow table attacks, bcrypt is an adaptive function: over time, the iteration count can be increased to make it slower, so it remains resistant to brute-force search attacks even with increasing computation power. (see)
While bcrypt.js is compatible to the C++ bcrypt binding, it is written in pure JavaScript and thus slower (about 30%), effectively reducing the number of iterations that can be processed in an equal time span.
The maximum input length is 72 bytes (note that UTF8 encoded characters use up to 4 bytes) and the length of generated hashes is 60 characters.
Usage
The library is compatible with CommonJS and AMD loaders and is exposed globally as dcodeIO.bcrypt if neither is
available.
9. Sass Boilerplate
A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.
KittyGiraudel
/
sass-boilerplate
A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.
Sass Boilerplate
This is a sample project using the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.
Each folder of this project has its own README.md file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.
Using the indented syntax
Sass conversion
This boilerplate does not provide a .sass version as it would be painful to maintain both versions without an appropriate build process. However, it is very easy to convert this boilerplate to Sass indented syntax.
Clone it, head into the project and then run:
sass-convert -F scss -T sass -i -R ./ && find . -iname β*.scssβ -exec bash -c 'mv "$0" β${0%\.scss}.sass"' {} \;
Use with Sass
When using sass - in order to build that boilerplate, one needs to:
- install
sassif not yet installed:
npm install -g sass
- run build command from commandβ¦
10. Devicons
An iconic font made for developers. Devicons contains 85 vectorized sharp glyphs . Devicons iconic font is free to use and licensed under MIT.
Meet Devicons
an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.
Devicons is a full stack iconic font ready to be shipped with your next project. Created, handcrafted and coded by Theodore Vorillas Devicons contains 85 vectorized sharp glyphs Devicons iconic font is free to use and licensed under MIT.
Devicons icon set 1.8.0
Use Devicons with a single line of code.
Thanks to the wonderful guys of jsdelivr you can now add Devicons into your project by adding the following code into the <HEAD> section of your project's HTML:
<link href='//cdn.jsdelivr.net/npm/devicons@1.8.0/css/devicons.min.css' rel='stylesheet'>
Getting Started
- Download and extract the repository
- Copy the
devicons.cssto your project - Copy the
fontsfolder to your project - Ensure the font urls within
devicons.cssproperly reference thefontspath within your project. - Include a reference to the
devicons.cssfile from every webpage you need to use it.
Install using
β¦Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (1)
Thanks Sharing Nice List