dehbmarques / Reimgix
🌇 Get all the benefits of Imgix using React. Supports LQIP.
Stars: ✭ 39
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Reimgix
React Stack Grid
Pinterest like layout components for React.js
Stars: ✭ 803 (+1958.97%)
Mutual labels: react-component
React Hanko
A Japanese hanko component for React.js
Stars: ✭ 14 (-64.1%)
Mutual labels: react-component
React Planner
✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
Stars: ✭ 846 (+2069.23%)
Mutual labels: react-component
React Insta Stories
A React component for Instagram like stories
Stars: ✭ 777 (+1892.31%)
Mutual labels: react-component
React Notifications Component
Delightful and highly customisable React Component to notify your users
Stars: ✭ 978 (+2407.69%)
Mutual labels: react-component
React Facial Feature Tracker
React Component for Facial Feature Recognition based on the clmtracker
Stars: ✭ 13 (-66.67%)
Mutual labels: react-component
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+2338.46%)
Mutual labels: react-component
React Visual Diff
React component for rendering the diff of two React elements
Stars: ✭ 22 (-43.59%)
Mutual labels: react-component
React Prismazoom
A pan and zoom component for React, using CSS transformations.
Stars: ✭ 29 (-25.64%)
Mutual labels: react-component
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-53.85%)
Mutual labels: react-component
React Animated Weather
Animated weather component for React inspired by Skycons http://darkskyapp.github.io/skycons/ ☀️
Stars: ✭ 34 (-12.82%)
Mutual labels: react-component
React Toastify
React notification made easy 🚀 !
Stars: ✭ 8,113 (+20702.56%)
Mutual labels: react-component
React Absolute Grid
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Stars: ✭ 910 (+2233.33%)
Mutual labels: react-component
Spicy Datatable
React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization.
Stars: ✭ 36 (-7.69%)
Mutual labels: react-component
React Markdown Preview
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
Stars: ✭ 34 (-12.82%)
Mutual labels: react-component
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-25.64%)
Mutual labels: react-component
🌇 React utils to imgix™
Usage
Generate a stringified url with params
import { generate } from 'reimgix'
const url = generate('http://your.site/img.png?fit=clamp', { h: 50 })
// url = http://your.site/img.png?fit=clamp&h=50
const url = generate(
'http://your.site/img.png?fit=clamp',
{ h: 50 },
{ removeUrlParams: true } // will remove fit=clamp
)
// url = http://your.site/img.png?h=50
Lqip techinique
import { Lqip, generate } from 'reimgix'
const url = generate('http://your.site/bear.png?fit=clamp', { h: 50 })
const App = () => (
<Lqip src={url}>
{({ src }) => (
<img src={src} alt="Bear" />
)}
</Lqip>
)
import { Lqip, generate } from 'reimgix'
const url = generate('http://your.site/bear.png?fit=clamp', { h: 50 })
const App = () => (
<Lqip src={url}>
{({ src, loaded }) => (
<div>
Image below is using {loaded ? 'full version' : 'lqip version'}
<img src={src} alt="Bear" />
</div>
)}
</Lqip>
)
Install
Node Module
yarn add reimgix
# or
npm i reimgix
UMD library
<script src="https://unpkg.com/reimgix/dist/reimgix.min.js"></script>
exposed as Reimgix
Contribute
You can help improving this project by sending PRs and helping with issues.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].