Integrate user-agent detection in an idiomatic React way

Overview

react-useragent

Integrate user-agent detection in an idiomatic React way.

Installation

yarn add @quentin-sommer/react-useragent or npm i -s @quentin-sommer/react-useragent

For React 15 (old context) use the 2.x version

// React 15
"dependencies": {
  ...
  "@quentin-sommer/react-useragent": "^2.0.0"
  ...
}

Introduction

Imagine being able to render magnificent, deep links, beautiful download buttons for your app. Well, Now you can.

<div>
  <UserAgent ios>
    <BeautifulIOSButton />
  </UserAgent>
  <UserAgent windows>
    <BeautifulWindowsButton />
  </UserAgent>
</div>

react-useragent wraps the great UAParser.js library and make it easy to use useragent knowledge inside your React applications. react-useragent provides useful shortcuts but you can always use an escape hatch in case you want to access the underlying library.

live demo

Usage

Next.js example

The most common question about this library is how to use it with Next.js. An example is available in an issue.

Generic usage

First you need to wrap your App in a <UserAgentProvider> tag. You also need to pass a user agent string to <UserAgentProvider>. On the browser that would be window.navigator.userAgent.

react-useragent works in server side rendering as well, just pass it the request useragent string. On express that would be req.headers['user-agent'].

import {UserAgentProvider} from '@quentin-sommer/react-useragent'

const App = props => (
  <UserAgentProvider ua={window.navigator.userAgent}>
    <div>{/* rest of your App */}</div>
  </UserAgentProvider>
)

Then use the <UserAgent> component.

react-useragent expose some props, these are optimized and using them will be faster than directly accessing the UAParser.js library.

Available props for <UserAgent>

  • computer
  • windows
  • linux
  • mac
  • mobile
  • tablet
  • android
  • ios
  • firefox
  • chrome
  • edge
  • safari

Theses props are cumulable : <UserAgent firefox mobile> will match both firefox browser and mobile systems.

import {UserAgentProvider, UserAgent} from '@quentin-sommer/react-useragent'

const App = props => (
  <UserAgentProvider ua={window.navigator.userAgent}>
    <div>
      <UserAgent mobile>
        <p>This will only be rendered on mobile</p>
      </UserAgent>
    </div>
  </UserAgentProvider>
)

You can also use this alternative API if you find it more convenient

<UserAgent mobile>
    {uaIsMobile => (
        {uaIsMobile && <p>This will ONLY be rendered on mobile</p>}
        {!uaIsMobile && <p>This will NOT be rendered on mobile</p>}
    )}
</UserAgent>

For full power you can always access the underlying parser with the returnFullParser prop

<UserAgent returnFullParser>
  {parser => (
    <p>
      I see you, {parser.getOS().name} {parser.getCPU().architecture}
    </p>
  )}
</UserAgent>

You can also use the library with the useContext hook

import {UAContext} from '@quentin-sommer/react-useragent'
const UsingContextHook = () => {
  const {uaResults, parser} = useContext(UAContext)
  return parser.getOS().name
}

For more example see the demo app source here

If you have any questions don't hesitate to say hi on Twitter

Comments
  • Export simple boolean or object

    Export simple boolean or object

    Hey, I just stumpled upon your library and it's great I am going to use it for my Next.js application. One question though: Would it be possible to export a simple boolean like: isMobile or an object or something?

    opened by BjoernRave 14
  • Including Oculus Browser

    Including Oculus Browser

    With more increase of VR headset sales, it would be nice to include Oculus Browser. Is there any chance someone like me can assist through a PR to include the Oculus Browser in this library?

    opened by jazilzaim 4
  • How to use it without <UserAgent>?

    How to use it without ?

    Good evening.

    Is there some 'isMobile' variable available? I searched in source code but found nothing. Sometimes we need to add className depending if isMobile or not; or do some logical before render; others I use <UserAgent>.

    Nice work, thank you =)

    opened by vendramini 4
  • Next 9 warns opted-out Automatic Prerendering

    Next 9 warns opted-out Automatic Prerendering

    Based on your example next example, The example is using getInitialProps,this gets warn.

    Warning: You have opted-out of Automatic Prerendering due to `getInitialProps` in `pages/_app`.
    
     Read more: https://err.sh/next.js/opt-out-automatic-prerendering
    

    Is there anyway to comply with the warning?

    Thanks,

    opened by Tanapruk 3
  • An in-range update of prop-types is breaking the build 🚨

    An in-range update of prop-types is breaking the build 🚨

    The devDependency prop-types was updated from 15.6.2 to 15.7.0.

    🚨 View failing branch.

    This version is covered by your current version range and after updating it in your project the build failed.

    prop-types is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

    Status Details
    • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 3
  • An in-range update of react is breaking the build 🚨

    An in-range update of react is breaking the build 🚨

    There have been updates to the react monorepo:

      • The devDependency react was updated from 16.6.1 to 16.6.2.
    • The devDependency react-dom was updated from 16.6.1 to 16.6.2.

    🚨 View failing branch.

    This version is covered by your current version range and after updating it in your project the build failed.

    This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

    react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

    Status Details
    • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper Bot :palm_tree:

    https://app.leanboard.io/board/f80118c3-5747-4759-8904-6bf5cca7b619 LeanBoard

    greenkeeper 
    opened by greenkeeper[bot] 3
  • next.js example

    next.js example

    I am trying to use react-useragent with next.js 7. I try to follow the example here: https://medium.com/@quentin.smr/abstract-boilerplate-from-next-js-getinitialprops-eec23edee931 but am getting "ReferenceError: navigator is not defined" no matter what I do.

    Would you be willing to provide a small next.js example using this the way you do in next.js?

    opened by Enalmada 3
  • negated props?

    negated props?

    Hi @quentin-sommer, firstly, thank you for creating this useful library!

    In a particular use-case, I was looking to target only a mobile phones, but not tablets. Unfortunately, I noticed that the mobile prop is set to true on both mobile and tablet devices.

    So, in such a case, what do you recommend? Would you consider adding a false value such that the code below would target only say mobile phones:

    <UserAgent mobile tablet = { false } /> 
    

    If so, that would be useful for people who want to target only certain browsers on certain mobile devices as this would provide the desired flexibility?

    Thank you!

    opened by oyeanuj 3
  • Error when testing with Page Speed Insight

    Error when testing with Page Speed Insight

    When testing page in https://developers.google.com/speed/pagespeed/insights

    Site gets error with react-useragent

    TypeError undefined is not a function
    webpack:///node_modules/@quentin-sommer/react-useragent/es/UserAgent.js:17
      | props = _objectWithoutProperties(_ref, ['children', 'returnfullParser']);
      |  
      | var validProps = Object.keys(props).filter(function (prop) {
      | return availableProps.includes(prop);
      | });
      | var ret = validProps.some(function (prop) {
      | return ua.uaResults[prop];
    
    
    opened by jaynakus 3
  • Bump React version

    Bump React version

    The project is already using the types/react v17. Is it possible to bump the react version too to 17 and update the peer dependency? I'm getting an error installing on a react 17 project.

    opened by mmbrtstd 2
  • Bump @types/react from 17.0.5 to 17.0.26

    Bump @types/react from 17.0.5 to 17.0.26

    Bumps @types/react from 17.0.5 to 17.0.26.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • Bump typescript from 4.2.4 to 4.8.4

    Bump typescript from 4.2.4 to 4.8.4

    Bumps typescript from 4.2.4 to 4.8.4.

    Release notes

    Sourced from typescript's releases.

    TypeScript 4.8.4

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.8.3

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.8

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.8 RC

    For release notes, check out the release announcement.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump @types/jest from 26.0.23 to 29.1.1

    Bump @types/jest from 26.0.23 to 29.1.1

    Bumps @types/jest from 26.0.23 to 29.1.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump terser from 4.8.0 to 4.8.1

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    opened by dependabot[bot] 0
  • Bump react, react-dom and @types/react

    Bump react, react-dom and @types/react

    Bumps react, react-dom and @types/react. These dependencies needed to be updated together. Updates react from 16.14.0 to 18.2.0

    Release notes

    Sourced from react's releases.

    18.2.0 (June 14, 2022)

    React DOM

    React DOM Server

    Server Components (Experimental)

    18.1.0 (April 26, 2022)

    React DOM

    React DOM Server

    ESLint Plugin: React Hooks

    Use Subscription

    18.0.0 (March 29, 2022)

    ... (truncated)

    Changelog

    Sourced from react's changelog.

    18.2.0 (June 14, 2022)

    React DOM

    React DOM Server

    Server Components (Experimental)

    18.1.0 (April 26, 2022)

    React DOM

    React DOM Server

    ESLint Plugin: React Hooks

    Use Subscription

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by gnoff, a new releaser for react since your current version.


    Updates react-dom from 16.14.0 to 18.2.0

    Release notes

    Sourced from react-dom's releases.

    18.2.0 (June 14, 2022)

    React DOM

    React DOM Server

    Server Components (Experimental)

    18.1.0 (April 26, 2022)

    React DOM

    React DOM Server

    ESLint Plugin: React Hooks

    Use Subscription

    18.0.0 (March 29, 2022)

    ... (truncated)

    Changelog

    Sourced from react-dom's changelog.

    18.2.0 (June 14, 2022)

    React DOM

    React DOM Server

    Server Components (Experimental)

    18.1.0 (April 26, 2022)

    React DOM

    React DOM Server

    ESLint Plugin: React Hooks

    Use Subscription

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by gnoff, a new releaser for react-dom since your current version.


    Updates @types/react from 17.0.5 to 18.0.14

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump prettier from 2.3.0 to 2.7.1

    Bump prettier from 2.3.0 to 2.7.1

    Bumps prettier from 2.3.0 to 2.7.1.

    Release notes

    Sourced from prettier's releases.

    2.7.1

    đź”— Changelog

    2.7.0

    diff

    đź”— Release note

    2.6.2

    đź”— Changelog

    2.6.1

    đź”— Changelog

    2.6.0

    đź”— Release note

    2.5.1

    đź”— Changelog

    2.5.0

    diff

    đź”— Release note

    2.4.1

    đź”— Changelog

    2.4.0

    diff

    Release note

    2.3.2

    changelog

    v2.3.1

    Changelog

    Changelog

    Sourced from prettier's changelog.

    2.7.1

    diff

    Keep useful empty lines in description (#13013 by @​chimurai)

    # Input
    """
    First line
    

    Second Line """ type Person { name: String }

    Prettier 2.7.0

    """ First line Second Line """ type Person { name: String }

    Prettier 2.7.1

    """ First line

    Second Line """ type Person { name: String }

    2.7.0

    diff

    đź”— Release Notes

    2.6.2

    diff

    Fix LESS/SCSS format error (#12536 by @​fisker)

    ... (truncated)

    Commits
    • eeed611 Release 2.7.1
    • 794d9d1 bugfix(graphql): Keep useful empty lines in description (#13013)
    • dd2af6f Fix --skip-dependencies-install
    • b21772b Allow skip depencies install & set repo
    • 5530ad2 Merge branch 'main' of github.com:prettier/prettier
    • c7c9930 Clean changelog
    • 448786f Revert changes in release script
    • 6b388fa Add truncate
    • 109333a Git blame ignore 2.7.0
    • 59ec4f2 Bump Prettier dependency to 2.7.0
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by prettier-bot, a new releaser for prettier since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump husky from 4.3.8 to 8.0.1

    Bump husky from 4.3.8 to 8.0.1

    Bumps husky from 4.3.8 to 8.0.1.

    Release notes

    Sourced from husky's releases.

    v8.0.1

    • fix: use POSIX equality operator

    v8.0.0

    What's Changed

    Feats

    • feat: add husky - prefix to logged global error messages by @​joshbalfour in typicode/husky#1092
    • feat: show PATH when command not found to improve debuggability
    • feat: drop Node 12 support
    • feat: skip install if $HUSKY=0

    Fixes

    Docs

    Chore

    v7.0.4

    No changes. Husky v7.0.3 was reverted, this version is the same as v7.0.2.

    v7.0.2

    Fix pre-commit hook in WebStorm (#1023)

    v7.0.1

    • Fix gracefully fail if Git command is not found #1003 (same as in v6)

    v7.0.0

    • Improve .husky/ directory structure. .husky/.gitignore is now unnecessary and can be removed.
    • Improve error output (shorter)
    • Update husky-init CLI
    • Update husky-4-to-7 CLI
    • Drop Node 10 support

    Please help me develop and release OSS projects :heart: on GitHub Sponsors or Open Collective. Thank you for your support!

    v6.0.0

    After being in early access for Open Source projects and Sponsors for a limited time, I'm happy to announce that husky 6 is MIT again and can be freely used in commercial projects! 🎉

    Many thanks to the Open Source projects and Companies which have switched to/sponsored the new husky during this period!

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
Seamlessly integrate a search engine to find live ticker symbols into your web app

Ticker Symbol Search Seamlessly integrate a search engine to find live ticker symbols into your web app View Demo · Report Bug · Request Feature Usage

Harsohail Brar 13 Dec 17, 2021
Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

OSLabs Beta 461 Sep 8, 2022
The smartest way to share interactive components with your team.

A React component that works like a preview of other components. An excellent tool to show how your component works and looks with. Easy to install an

Scup by Sprinklr 996 Sep 14, 2022
React protected routes - React Protected Routes with Role-Based User Authorization

"React Protected Routes with Role-Based User Authorization" âś… Check out my YouTu

Dave Gray 137 Sep 29, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.6k Sep 20, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.6k Sep 25, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.5k Sep 22, 2022
A next.js website that fetches random user data using axios

next.js random user using axios.get() example typescript by: UnusualAbsurd Live

UnusualAbsurd 1 Dec 17, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 24, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 21, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 29, 2022
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

OSLabs Beta 48 Apr 17, 2022
Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code ???? Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-

kamesh sethupathi 6 Aug 11, 2022
Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

prom-react Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries Scope and purpose The main objective of th

Cabify 10 Sep 12, 2022
React hooks for generating QRCode for your next React apps.

next-qrcode React hooks for generating QR code for your next React apps. ?? Features Render as Canvas & Image Support Numeric, Alphanumeric, Kanji and

Bunlong VAN 69 Sep 15, 2022
React Native Performance Monitor - Realtime graphing of React Native render performance

React Native Performance Monitor This project lets you see a realtime graph of render times within your React Native app. The purpose is for you to be

Flagsmith 281 Sep 16, 2022
Commonninja-react - A small library for using Common Ninja's plugins in React projects

Common Ninja for React A small library for using Common Ninja's plugins in React

Common Ninja 1 Jan 3, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

zthxxx 811 Sep 25, 2022
Webpack+react+redux+react-loadable SSR isomorphic rendering

webpack react loadable redux ssr English document An introduction to Welcome to React-SSR-lazy-Loading documentation! description: 0 cost learning, th

姚观寿 16 Aug 22, 2022