Configure and build views using JSON schemas mapped to React components

Overview

react-json-schema

npm install react-json-schema

Construct React elements from JSON by mapping JSON definitions to React components. Use react-json-schema for data-driven layouts, or as an abstraction layer for React components and props.

Render anywhere (as long as it's DOM)! Since react-json-schema does not perform any rendering, the method in which you want to render is up to you. For example, you can use ReactDOMServer.render, ReactDOM.renderToString, etc. if you'd like. This also means JSX is not a dependency for react-json-schema.

Quick Documentation and Examples

Full Documentation

Schema

The primary resource needed is a defined schema in JSON or a JavaScript object literal. It's recommended that schema attributes mainly define React component props. The parser explicitly handles the following attributes:

  • component: MUST exist and be defined by a string or React component (must be a string if describing a native HTML tag)
  • children: MAY exist to define sub-components
  • text: MAY exist to as a string to define inner HTML text (overrides children)
  • key: MAY exist to define a key for dynamic children

Example JSON schema

const schema = {
  "component": "CommentList",
  "children": [
    {
      "component": "Comment",
      "author": "Pete Hunt",
      "children": "This is one comment"
    },
    {
      "component": "Comment",
      "author": "Jordan Walke",
      "children": "This is *another* comment"
    },
    {
      "component": "a",
      "href": "#help",
      "text": "I need help"
    }
  ]
};

Example JS literal

...
  {
    "component": Comment,
    "author": "Pete Hunt",
    "children": "This is one comment"
  },
...
Dynamic Children and Keys

When arrays of components exist (like children), react-json-schema will resolve a key for the element, which follows the rules for dynamic children. It will either use a custom key if defined, or resolve a numeric key based on the array index.

Example of defining child keys

...
  {
    "component": "Comment",
    "key": "0ab19f8e", // defined key
    "author": "Pete Hunt",
    "children": "This is one comment"
  },
...

Component Mapping

React components need to be exposed to the react-json-schema so that the parser can create React elements. If the schema contains object literals with component references, the schema is exposing the React components and no additional configuration is needed. If the schema does not contain references to components, the components can be exposed via setComponentMap.

Example for exposing non-exposed components (ES6)

/* es6 object literal shorthand: { ContactForm } == { ContactForm: ContactForm } */
contactForm.setComponentMap({ ContactForm, StringField });

Parsing

Use parseSchema to render React elements. It returns the root node. Note that if your schema's root is an array, you'll have to wrap the schema in an element.

Example (ES6)

ReactDOM.render(contactForm.parseSchema(schema),
  document.getElementById('contact-form'));

Complete Example

import ReactDOM from 'react-dom';
import ReactJsonSchema from 'react-json-schema';

import FormStore from 'FormStore';
import CommentList from 'CommentList';
import Comment from 'Comment';

// For this example, let's pretend I already have data and am ignorant of actions
const schema = FormStore.getFormSchema();
const view = new ReactJsonSchema();

view.setComponentMap({ CommentList, Comment });

ReactDOM.render(view.parseSchema(schema),
  document.getElementById('content'));

Demo an Example Codebase

To run the demo

Contribution and Code of Conduct

If you'd like to ask a question, raise a concern, or contribute, please follow our contribution guidelines.

Alternatives

  • react-jsonschema-form: A React component for building Web forms from JSON Schema. This library further abstracts React components, making it easier to build forms. Also, it comes with components. React-json-schema is a lighter alternative that allows the use of any components.

Roadmap

  • Playground on our public site for discoverability
  • Possibility of react-native-json-schema
Comments
  • Plugin Support

    Plugin Support

    React-json-schema is intentionally minimal. It's purpose is to create React elements from JSON, and does not support configurations beyond this scope. However, there's an opportunity to define configuration beside component definitions (#24, #32, #33). Providing plugin support in react-json-schema will allow users to customize their react-json-schema implementation, and keep the core library small.

    The thought is that plugins would be capable of modifying each subSchema before element creation.

    We could migrate to a monorepo (using Lerna) so that all plugins are housed in the same repository, which is common for open source JavaScript (webpack, babel, etc.).

    I'm personally exploring what this would look like. I'm open to suggestions.

    wontfix 
    opened by eiof 6
  • uniforms library not supported

    uniforms library not supported

    i want to pass a component to react json schema which is the imported from uniforms bootstrap4 this is the library for json forms i want to passs this component to react json schema like that import AutoForm from 'uniforms-bootstrap4/AutoForm'; but when i am passing this to children it didn't render anything

    `const schema = { component: 'div', children:[{ component:'AutoForm', props: { // validate:"onSubmit", schema:loginSchema, // onSubmit:(docs) =>{console.log('submit')}, // placeholder:true, // label:true }, }]

    };

    and here is my login schema

    `const loginSchema = new SimpleSchema({ email: { type: String, max: 50, regEx: SimpleSchema.RegEx.Email, uniforms:{ placeholder:'Email',label:false, type: 'email' } }, password: { type: String, max: 100, uniforms: {type: 'password', placeholder:'Password',label:false

      }
      },
    

    Remember: { type: Boolean, label:'Remember me', defaultValue: false, optional:true, uniforms: {type: 'password', placeholder:'Password',

    }
    

    }, });` export default () => parseJsonSchema(schema);

    other components are rendering but not this one

    opened by waheed25 6
  • React Router is not able pass params into component created by this library

    React Router is not able pass params into component created by this library

    @elliottisonfire JSON, { "component": "ActionForm", "title": "Action Comment", "columnUnit": 12, "styles": "", "children": [ { "component": "Dropdown", "label": "Reason", "name": "Reason", "dropdown_content": ["Unable to verify identity/Entity (L2)", "Unable to verify identity/Entity (L3)"], "styles": "" }, { "component": "CheckboxField", "styles": { "margin": "10px" }, "checkboxes": [ { "label": "checkbox_item1_checked_default", "key": 0 }, { "label": "Possible Name Match", "key": 1 }, { "label": "Possible Business Name Match", "key": 2 }, { "label": "Physical Address Matches", "key": 3 } ] } ] }

    ...... const componentMap = { ActionForm, Dropdown, CheckboxField } const form = new ReactJsonSchema(); form.setComponentMap(componentMap); const ActionFormComponent = () => form.parseSchema(actionFormSchema);

    ....

           <Route path="action/:actionId" component={ActionFormComponent} />
    
    opened by pandiantcsl 4
  • Middleware

    Middleware

    This is my idea of what a plugin system might look like, an idea to resolve #34. It allows a function to intercept the rendering process and make changes to the schema pre-render. All tests are currently passing.

    The benefits for me are

    • Doesn't change core behavior in any way
    • The behavior is optional
    • No breaking changes
    • Covers any use case I can imagine
    opened by richbai90 3
  • TypeError: Cannot read property 'hasOwnProperty' of undefined

    TypeError: Cannot read property 'hasOwnProperty' of undefined

    When I use this schema I get this error: TypeError: Cannot read property 'hasOwnProperty' of undefined

    Same happens when I use other HTML natives like 'div', but my custom components work fine as JS literals. Am I doing something wrong?

        const hey = new ReactJsonSchema();
    
       const schema = {
            'component': "form",
            'children': [ 
                {
                    'component': Row,
                    'children': [
                        {
                        'component': Input,
                        'inColumn': true,
                        'label': 'What\'s your name',
                        'name': 'fullname',
                        'value': 'testing'
                        },
                        {
                        'component': Input,
                        'inColumn': true,
                        'label': 'hey',
                        'name': 'hey',
                        'value': 'hello'
                        }
                    ],
                }
            ]
        }
    
         {hey.parseSchema(schema)}
    
    opened by anushkadoyan 3
  • Passing handler function as props

    Passing handler function as props

    @nlaffey @eiof Does the current implementation support passing handler functions as function names to the schema?

    I'm able to work with the below scenario:

    {
        component: 'MyComponent,
        onClick: this.handleClickingMe.bind(this),
    }
    

    This one is possible if I'm creating using the schema just within the Component.

    But it is not working with the below scenario, where I'd like to save and load the schema from the DB. In such cases, it is not possible to put the function reference directly, it would require function names to be saved instead.

    {
        component: 'MyComponent,
        onClick: 'handleClickingMe',
    }
    

    I'd suggest something like below:

    {
        component: 'MyComponent,
        handlers: [
                onClick: 'handleClickingMe',
        ]
    
    }
    

    Would be good if you could throw some insights on this. I'll find time to contribute for the same.

    help wanted 
    opened by sirajulm 3
  • UMD Distribution Option

    UMD Distribution Option

    Currently, the ReactJsonSchema distribution has to be used in a CommonJS capable environment. It may serve someone benefit for there to be a UMD distribution of ReactJsonSchema.

    UMD = Universal Module Definition

    These are modules which are capable of working everywhere, be it in the client, on the server or elsewhere. (https://github.com/umdjs/umd)

    I propose we add a the UMD distribution under a new directory, dist/umd. Weback is capable of outputting the additional distribution at build time.

    opened by eiof 3
  • Support elements that children is not allowed

    Support elements that children is not allowed

    Invariant Violation: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. Check the render method of Checkbox.
    

    Some element like input is a void element tag, can not be used with property children

    bug 
    opened by sunfmin 3
  • Support strings as children

    Support strings as children

    This adds support for translating the following schema into markup like <p>This paragraph has <a href="http://google.com">a link</a> inside it.</p>.

    {
      component: 'p',
      children: [
        'This paragraph has ',
        {
          component: 'a',
          href: 'http://google.com',
          text: 'a link'
        },
        ' inside it'
      ]
    }
    

    It seems like this kind of thing should definitely be supported since React supports it as seen in this Babel REPL link.

    The question it raises is what about the "special" text property? Should it be removed or should both formats be supported?

    Happy to add tests and stuff if you want to accept this change.

    opened by bclinkinbeard 3
  • React Native support

    React Native support

    What sort of level of effort are we talking about to enhance react-json-schema to support React Native usage? Would it even be possible to work in the native app component world as opposed to the DOM world?

    question 
    opened by somecatdad 2
  • Mapping fails

    Mapping fails

    Hi,

    I am using your nice plugin with a lot of satisfaction!

    There is one issue when it comes to map an object literal using a pre-definite schema.

    This is the required component structure: const steps = [ {name: 'Step 1', component: }, {name: 'Step 2', component: }, {name: 'Step 3', component: }, {name: 'Step 4', component: }, {name: 'Step 5', component: } ]

    <div className='step-progress'>
        <StepZilla steps={steps}/>
    </div>
    

    I have tried to map it via following schema, but the Reference component is expecting an object literal with the following structure:

    • {name: 'Step 1', component: },

    The issue is in the children part as this in not an object like expected. I have tried just using:

    • "component": "AxQlikVisualization" but it give sme Failed prop type: Invalid prop steps[0].component of type string supplied to StepZilla,

    I am sure I miss out something...

    { "component": "Container", "className": "Wizard", "children": [ { "component": "AxStepWizard", "steps": [ { "name": "Step 1", **"children": [ { "component": "AxQlikVisualization"

                        }
                    ]**
                }
            ]
        }
    ]
    

    }

    Can you please assist me in this?

    Thanks and regards, Patric

    question 
    opened by pamatulli81 2
  • Bump loader-utils from 1.1.0 to 1.4.2

    Bump loader-utils from 1.1.0 to 1.4.2

    Bumps loader-utils from 1.1.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump async from 2.6.0 to 2.6.4

    Bump async from 2.6.0 to 2.6.4

    Bumps async from 2.6.0 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)

    v2.6.1

    • Updated lodash to prevent npm audit warnings. (#1532, #1533)
    • Made async-es more optimized for webpack users (#1517)
    • Fixed a stack overflow with large collections and a synchronous iterator (#1514)
    • Various small fixes/chores (#1505, #1511, #1527, #1530)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump chownr from 1.0.1 to 1.1.4

    Bump chownr from 1.0.1 to 1.1.4

    Bumps chownr from 1.0.1 to 1.1.4.

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.5 to 1.0.7

    Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.5.0 to 2.8.9

    Bump hosted-git-info from 2.5.0 to 2.8.9

    Bumps hosted-git-info from 2.5.0 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.11 to 4.17.21

    Bump lodash from 4.17.11 to 4.17.21

    Bumps lodash from 4.17.11 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.0.1)
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

appbase.io 4.7k Jan 4, 2023
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.4k Dec 24, 2022
Useful components and utilities for working with React

react-extras Useful components and utilities for working with React Install $ npm install react-extras Usage import React from 'react'; import {If} f

Sindre Sorhus 695 Jan 7, 2023
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

"Keo" is the Vietnamese translation for glue. Plain functions for a more functional Deku approach to creating stateless React components, with functio

Adam Timberlake 225 Sep 24, 2022
⚛️ 🔧 Lodash as React components

react-lodash Use any lodash function as a React component Example Without import react from 'react' array && array.length ? ( <ul> {array.map(i

null 347 Nov 16, 2022
Modern file uploading - components & hooks for React

Modern file-upload components & hooks for React. Contents Intro Documentation Installation Packages Examples Important Concepts Resumable Uploads UMD

rpldy 768 Dec 28, 2022
Harness the power of reactive programming to supercharge your components

Handle your component effects and side-effects in a clear and declarative fashion by using asynchronous data streams (reactive programming). Why? · In

FanDuel OSS 810 Jan 7, 2023
Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.

Heroku: http://maple-app.herokuapp.com/ npm: npm install maple.js Bower: bower install maple.js Maple is a seamless module that allows you to organise

Adam Timberlake 430 Dec 23, 2022
⚡️ Lightning-fast search for React and React Native applications, by Algolia.

React InstantSearch is a library for building blazing fast search-as-you-type search UIs with Algolia. React InstantSearch is a React library that let

Algolia 2k Dec 27, 2022
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 633 Jan 5, 2023
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

contra 6.5k Dec 30, 2022
A performant, scalable and pluggable approach to instrumenting your React application.

react-i13n react-i13n provides a performant, scalable and pluggable approach to instrumenting your React application. Typically, you have to manually

Yahoo 369 Dec 25, 2022
:postbox: A simple and customizable React notifications system

Reapop A simple and customizable React notifications system Summary Compatibility Demo Installation Integration & usage With React & Redux With React

Louis Barranqueiro 1.4k Jan 5, 2023
The simple but very powerful and incredibly fast state management for React that is based on hooks

Hookstate The simple but very powerful and incredibly fast state management for React that is based on hooks. Why? • Docs / Samples • Demo application

Andrey 1.5k Jan 7, 2023
A way to seamlessly integrate React and AngularJS

angulareact A way to seamlessly integrate React and AngularJS. Great for projects slowly migrating from AngularJS to React, supports using React compo

tonkean 18 Oct 3, 2022
A tiny state manager for React, Svelte, Vue and vanilla JS

dotto.x Dotto.x is a tiny state manager for React, Svelte, and vanilla JS. Lightweight. Core is less than 135 bytes (minified and gzipped). Zero depen

null 108 Nov 2, 2022
Teaful - Tiny, easy and powerful React state management

Tiny, easy and powerful React state management library What advantages does it have? ✨ ?? ・Tiny: Less than 1kb package to manage your state in

Teaful 668 Dec 18, 2022
Lightweight react-like library. Support for asynchronous rendering and hooks.

Recept · Lightweight react-like library. Like the name, this project is mainly based on the architectural idea of react, which can feel react more int

RuiLin Dong 52 Sep 17, 2022