BranchesTags

Repository files navigation

React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish

Disclaimer

We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!

Why another component library?

  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.

Where is this library going?

  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)

How to Contribute?

This repo consists of two packages:

  1. apps/storybook
    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react
    • This contains all the utils/components and styles

Follow these steps to run the code and start development:

  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR

Publishing

  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on

Maintain

Run git push --follow-tags for all tags to be pushed to Github

Credits:

License

@reusejs/react is freely distributable under the terms of the MIT license.

Contributors

About

Reusable (Flexible to Style, and Powerful) React Components

react.reusejs.org/

Resources

Readme
MIT license
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

7 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
React StorybookNPM versionNPM downloadsMIT LicenseNPM Publish
Disclaimer
We are contributing to this repo heavily on a daily basis. As we are developing components, we are learning new things and updating the spec constantly. So, in case you opt to use some of the components in your projects, please keep yourself updated with the changes. We haven't yet even arrived at code of conduct or guidelines. The documentation is almost non-existent for the components. Having said that, we can't live without this library..!
Why another component library?
  1. The components here are built from scratch
  2. We (@betalectic)[https://twitter.com/betalectic] advocate reusability and abstraction (mostly for fun apart from all the reasons)
  3. The applications we build have drastically different UIs, that means we can't pick one "design" based library and stick to that "look"
  4. But, the functionality is common across the applications. So, we wanted a component library which doesn't come in our way when it comes to styling
  5. And almost all the libraries we explored, advocate "design guidelines" more than functionality of the components
  6. The first reason why we did this is to abstract functionality! And at the same time, give ourselves a change the look/feel drastically. That's why we have four ways to style our components.
Where is this library going?
  1. To Places for sure
  2. We don't know which all places, but we forsee that this library is not going to be just about components, but also about utilities like BetaForm hook (which you will love!), Form Builder (upcoming) and some abstractions which might sound like magic (but they are not for sure)
How to Contribute?
This repo consists of two packages:
  1. apps/storybook

    • This is used heavily in local development to view/test components as a component is being developed
  2. packages/react

    • This contains all the utils/components and styles
Follow these steps to run the code and start development:
  1. Run yarn install at root
  2. Run yarn sb at root -> will run storybook
  3. Run yarn build:watch -> will build the react package
  4. Create a branch for yourself
  5. Carry on with your development
  6. Once you are done with development, raise a PR
Publishing
  1. Run yarn changeset -> Generate your changelogs
  2. Push to Github
  3. Github Action Workflow will handle from there on
Maintain
Run git push --follow-tags for all tags to be pushed to Github
Credits:
License
@reusejs/react is freely distributable under the terms of the MIT license.
Contributors
About
Reusable (Flexible to Style, and Powerful) React Components
react.reusejs.org/
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
7 forks
Report repository
Releases
Packages
Used by
Contributors
Languages