paragon - πŸ’Ž Accessible components done right.

  •        453

Paragon provides accessible React components for use within the Open edX platform and beyond. Components' markup, keyboard triggers, and behavior are based on the WAI-ARIA 1.1 Authoring Practices. Components are styled with Bootstrap 4 via CSS Modules. Documentation/demo site is available at http://edx.github.io/paragon.

https://edx.github.io/paragon
https://github.com/edx/paragon

Dependencies:

@edx/edx-bootstrap : ^0.4.2
babel-polyfill : ^6.26.0
classnames : ^2.2.5
email-prop-type : ^1.1.3
font-awesome : ^4.7.0
mailto-link : ^1.0.0
prop-types : ^15.5.8
react : ^16.1.0
react-dom : ^16.1.0
react-element-proptypes : ^1.0.0
react-proptype-conditional-require : ^1.0.4

Tags
Implementation
License
Platform

   




Related Projects

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

react-bluekit - Automatically generating a component library from your React components (ES5, ES6, Typescript)

  •    Javascript

BlueKit automatically generates a library from your React components with editable props and live preview. Point BlueKit to folders with your React components and it will generate a library for you. You'll be able to browse through the components, tweak their props, and see the changes live. Furthermore, any changes that you make to your components' code will be reflected in the library.

storybook - UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!

  •    TypeScript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

ReactScriptLoader - A library for creating React components that depend on external scripts.

  •    Javascript

ReactScriptLoader simplifies creating React components whose rendering depends on dynamically loaded scripts. It can be used for lazily loading heavy scripts but it's especially useful for loading components that rely on 3rd party scripts, such as Google Maps or Stripe Checkout. React apps are typically single-page apps that are rendered client-side in Javascript. When loading a site built with React, the browser typically pre-loads the javascript necessary to render the site's React components so that they can be rendered with no latency. This works well for sites that serve a relatively small amount of javascript from their own servers in a single bundle. However, in some situations pre-loading all the scripts necessary to render the site's components is impractial. For example, a site may have a Map component that relies on a dynamically loaded 3rd party library to render itself. It may be possible to delay rendering the app until the third party library is finished loading but doing so would make the site feel unnecessarily sluggish. It's a much better strategy to first render the page with a placeholder for the map and asynchronously render the map once the third party library has loaded. Deferring the loading of the external script is even more important when the map component isn't rendered right away but is only revealed after user interaction.

zent - A collection of essential UI components written with React.

  •    Javascript

Zent ( \ˈzent\ ), a collection of essential UI components written with React. Zent ( \ˈzent\ ) is a React component library developed and used at Youzan. Zent provides a collection of essential UI components and lots of useful domain specific components.


storybook - Interactive UI component dev & test: React, React Native, Vue, Angular

  •    Javascript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

react-tunnels - πŸš‡ Render React components in placeholders that are placed somewhere else in the component tree

  •    Javascript

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.

react-aria-menubutton - A fully accessible, easily themeable, React-powered menu button

  •    Javascript

A React component (set of components, really) that will help you build accessible menu buttons by providing keyboard interactions and ARIA attributes aligned with the WAI-ARIA Menu Button Design Pattern. Please check out the demo.

react-axe - Accessibility auditing for React.js applications

  •    Javascript

Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console. Call the exported function passing in the React and ReactDOM objects as well as a timing delay in milliseconds that will be observed between each component change and the time the analysis starts.

pyxley - Python helpers for building dashboards using Flask and React

  •    Javascript

The Pyxley python library makes use of the pyxleyJS React components to create Flask-based web applications. Through the use of the PyReact library, we can use Jinja templating to construct and transform a single React component. The specific UI components are passed as props to the parent component. A simpler interface is provided through the use of specific wrappers for each of the component types. An example of the Jinja template for a single React component is presented below.

react-toggled - Component to build simple, flexible, and accessible toggle components

  •    Javascript

You want a toggle component that's simple and gives you complete control over rendering and state.This follows the patterns in downshift to expose an API that renders nothing and simply encapsulates the logic of a toggle component.

react-sizeme - Make your React Components aware of their width and height!

  •    Javascript

Give your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered. The following configuration options are available. Please see the usage docs for how to pass these configuration values into either the component or higher order function.

Semantic-UI-React - The official Semantic-UI-React integration

  •    Javascript

See the Documentation for an introduction, usage information, and extensive examples.These great products are built on Semantic UI React. Add yours here.

Paragon

  •    PHP

Paragon is a robust and flexible fast application development framework written in PHP. Paragon contains a structured library of extensible components for modelling real world objects and processes. Paragon is a 3-tier system using a MVC paradigm.

downshift - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components

  •    Javascript

You need an autocomplete/dropdown/select experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.This is a component that controls user interactions and state for you so you can create autocomplete/dropdown/select/etc. components. It uses a render function as children which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering.

react-async-component - Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases

  •    Javascript

Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases. This library does not require that you use either Webpack or Babel. Instead it provides you a generic and "pure" Javascript/React API which allows for the expression of lazy-loaded Components. It's Promise-based API naturally allows you to take advantage of modern code splitting APIs (e.g import(), System.import, require.ensure).

react-experiments - React components for implementing UI experiments

  •    Javascript

react-experiments is a set of React components for implementing UI experiments.react-experiments was built to work with PlanOut.js and most of its constructs are inspired by the structure of PlanOut.js. This library will work out of the box if you pass it an instantiated PlanOut Namespace or Experiment class, but if you want to use your own methods of assigning experiment parameters and logging exposure then you can extend the base experiment class and pass that as the experiment class prop.

aurora-imui - General IM UI components

  •    Java

Aurora IMUI is a general IM UI components library, which does not depend on any specific IM SDK. This library provides common UI components such as MessageList, InputView. It supports common message type, such as text, image, audio, video, etc. By default it has several UI style for choice, and also supports style customization.

react-game-kit - Component library for making games with React & React Native

  •    Javascript

react-game-kit provides a set of helper components to make it easier to create games with React and React Native.The Loop component uses context to pass a subscribable game tick down your component tree. The Stage component does the same with game scale.