React UI animation made easy

• Animation from style A to B
• CSS keyframes animation
• Chain up animation sequences
• Tiny size without other dependency

$ npm install react-simple-animate

• Getting started
• Animate
• AnimateKeyframes
• AnimateGroup
• Custom Hooks
• Advanced

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>
    <

The most straightforward, extensible and incredibly fast state management that is based on React state hook

Why? • Docs / Samples • Demo application • Extensions • Release notes

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.

hookstate.js.org

hookstate.js.org/docs/migrating-to-v4

hookstate.js.org/docs/getting-started

• Running: https://hookstate.js.org/docs/getting-started
• Source code: https://github.com/avkonst/hookstate/tree/master/docs/demos/todolist

hookstate.js.org/docs/devtools

hookstate.js.org/docs/extensions-overview

hookstate.js.org/docs/typedoc-hookstate-core

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…

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.

yarn add rich-markdown-editor

or

npm install rich-markdown-editor

Note that react, react-dom, and styled-components are required peer dependencies.

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.

A simple and powerful Javascript HTML5 canvas library.

• Website
• GOTCHAS
• Contributing, Developing and More

• Out of the box interactions such as scale, move, rotate, skew, group...
• Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
• JPG, PNG, JSON and SVG i/o
• Typed and modular
• Unit tested

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.

$ npm install fabric --save
// or
$ yarn add fabric

See browser modules for using es6 imports in the browser or use a dedicated bundler.

A utility-first CSS framework for rapidly building custom user interfaces.

For full documentation, visit tailwindcss.com.

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

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.

Support Ukraine 🇺🇦

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.

• 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…

Vercel released react-tweet which is a better maintained version of this library. Please use that instead.

Extremely fast static renderer for tweets.

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.

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.

• ⚡ 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.

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).

You'll need to…

Optimized bcrypt in JavaScript with zero dependencies. Compatible to the C++ bcrypt binding on node.js and also working in the browser.

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.

The library is compatible with CommonJS and AMD loaders and is exposed globally as dcodeIO.bcrypt if neither is available.

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.

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"' {} \;

When using sass - in order to build that boilerplate, one needs to:

• install sass if not yet installed:

npm install -g sass

• run build command from command…

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.

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'>

1. Download and extract the repository
2. Copy the devicons.css to your project
3. Copy the fonts folder to your project
4. Ensure the font urls within devicons.css properly reference the fonts path within your project.
5. Include a reference to the devicons.css file from every webpage you need to use it.