React.JS
made by https://0x3d.site
GitHub - vadimdemedes/ink: π React for interactive command-line appsπ React for interactive command-line apps. Contribute to vadimdemedes/ink development by creating an account on GitHub.
Visit Site
GitHub - vadimdemedes/ink: π React for interactive command-line apps
React for CLIs. Build and test your CLI output using components.
Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. If you are already familiar with React, you already know Ink.
Since Ink is a React renderer, it means that all features of React are supported. Head over to React website for documentation on how to use it. Only Ink's methods will be documented in this readme.
Note: This is documentation for Ink 4 and 5. If you're looking for docs on Ink 3, check out this release.
Install
npm install ink react
Usage
import React, {useState, useEffect} from 'react';
import {render, Text} from 'ink';
const Counter = () => {
const [counter, setCounter] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCounter(previousCounter => previousCounter + 1);
}, 100);
return () => {
clearInterval(timer);
};
}, []);
return <Text color="green">{counter} tests passed</Text>;
};
render(<Counter />);
You can also check it out live on repl.it sandbox. Feel free to play around with the code and fork this repl at https://repl.it/@vadimdemedes/ink-counter-demo.
Who's Using Ink?
- GitHub Copilot for CLI - Just say what you want the shell to do.
- Cloudflare's Wrangler - The CLI for Cloudflare Workers.
- Linear - Linear built an internal CLI for managing deployments, configs and other housekeeping tasks.
- Gatsby - Gatsby is a modern web framework for blazing fast websites.
- tap - A Test-Anything-Protocol library for JavaScript.
- Terraform CDK - CDK (Cloud Development Kit) for HashiCorp Terraform.
- Specify CLI - Automate the distribution of your design tokens.
- Twilio's SIGNAL - CLI for Twilio's SIGNAL conference. Blog post.
- Typewriter - Generates strongly-typed Segment analytics clients from arbitrary JSON Schema.
- Prisma - The unified data layer for modern applications.
- Blitz - The Fullstack React Framework.
- New York Times - NYT uses Ink
kyt
- a toolkit that encapsulates and manages the configuration for web apps. - tink - Next-generation runtime and package manager.
- Inkle - Wordle game.
- loki - Visual regression testing for Storybook.
- Bit - Build, distribute and collaborate on components.
- Remirror - Your friendly, world-class editor toolkit.
- Prime - Open source GraphQL CMS.
- Splash - Observe the splash zone of a change across the Shopify's Polaris component library.
- emoj - Find relevant emojis.
- emma - Find and install npm packages.
- npm-check-extras - Check for outdated and unused dependencies, and run update/delete action over selected ones.
- swiff - Multi-environment command line tools for time-saving web developers.
- share - Quickly share files.
- Kubelive - CLI for Kubernetes to provide live data about the cluster and its resources.
- changelog-view - View changelogs.
- cfpush - An interactive Cloud Foundry tutorial.
- startd - Turn your React component into a web app.
- wiki-cli - Search Wikipedia and read summaries.
- garson - Build interactive config-based command-line interfaces.
- git-contrib-calendar - Display a contributions calendar for any git repository.
- gitgud - An interactive command-line GUI for Git.
- Autarky - Find and delete old
node_modules
directories in order to free up disk space. - fast-cli - Test your download and upload speed.
- tasuku - Minimal task runner.
- mnswpr - Minesweeper game.
- lrn - Learning by repetition.
- turdle - Wordle game.
- Shopify CLI - Build apps, themes, and storefronts for Shopify.
- ToDesktop CLI - An all-in-one platform for building Electron apps.
- Walle - Full-featured crypto wallet for EVM networks.
- Sudoku - Sudoku game.
Contents
- Getting Started
- Components
- Hooks
- API
- Testing
- Using React Devtools
- Useful Components
- Useful Hooks
- Examples
Getting Started
Use create-ink-app to quickly scaffold a new Ink-based CLI.
npx create-ink-app my-ink-cli
Alternatively, create a TypeScript project:
npx create-ink-app --typescript my-ink-cli
Set up Babel with a React preset to ensure all examples in this readme work as expected.
After installing Babel, install @babel/preset-react
and insert the following configuration in babel.config.json
:
npm install --save-dev @babel/preset-react
{
"presets": ["@babel/preset-react"]
}
Next, create a file source.js
, where you'll type code that uses Ink:
import React from 'react';
import {render, Text} from 'ink';
const Demo = () => <Text>Hello World</Text>;
render(<Demo />);
Then, transpile this file with Babel:
npx babel source.js -o cli.js
Now you can run cli.js
with Node.js:
node cli
If you don't like transpiling files during development, you can use import-jsx or @esbuild-kit/esm-loader to import
a JSX file and transpile it on the fly.
Ink uses Yoga - a Flexbox layout engine to build great user interfaces for your CLIs using familiar CSS-like props you've used when building apps for the browser.
It's important to remember that each element is a Flexbox container.
Think of it as if each <div>
in the browser had display: flex
.
See <Box>
built-in component below for documentation on how to use Flexbox layouts in Ink.
Note that all text must be wrapped in a <Text>
component.
Components
<Text>
This component can display text, and change its style to make it bold, underline, italic or strikethrough.
import {render, Text} from 'ink';
const Example = () => (
<>
<Text color="green">I am green</Text>
<Text color="black" backgroundColor="white">
I am black on white
</Text>
<Text color="#ffffff">I am white</Text>
<Text bold>I am bold</Text>
<Text italic>I am italic</Text>
<Text underline>I am underline</Text>
<Text strikethrough>I am strikethrough</Text>
<Text inverse>I am inversed</Text>
</>
);
render(<Example />);
Note: <Text>
allows only text nodes and nested <Text>
components inside of it. For example, <Box>
component can't be used inside <Text>
.
color
Type: string
Change text color. Ink uses chalk under the hood, so all its functionality is supported.
<Text color="green">Green</Text>
<Text color="#005cc5">Blue</Text>
<Text color="rgb(232, 131, 136)">Red</Text>
backgroundColor
Type: string
Same as color
above, but for background.
<Text backgroundColor="green" color="white">Green</Text>
<Text backgroundColor="#005cc5" color="white">Blue</Text>
<Text backgroundColor="rgb(232, 131, 136)" color="white">Red</Text>
dimColor
Type: boolean
Default: false
Dim the color (emit a small amount of light).
<Text color="red" dimColor>
Dimmed Red
</Text>
bold
Type: boolean
Default: false
Make the text bold.
italic
Type: boolean
Default: false
Make the text italic.
underline
Type: boolean
Default: false
Make the text underlined.
strikethrough
Type: boolean
Default: false
Make the text crossed with a line.
inverse
Type: boolean
Default: false
Inverse background and foreground colors.
<Text inverse color="yellow">
Inversed Yellow
</Text>
wrap
Type: string
Allowed values: wrap
truncate
truncate-start
truncate-middle
truncate-end
Default: wrap
This property tells Ink to wrap or truncate text if its width is larger than container.
If wrap
is passed (by default), Ink will wrap text and split it into multiple lines.
If truncate-*
is passed, Ink will truncate text instead, which will result in one line of text with the rest cut off.
<Box width={7}>
<Text>Hello World</Text>
</Box>
//=> 'Hello\nWorld'
// `truncate` is an alias to `truncate-end`
<Box width={7}>
<Text wrap="truncate">Hello World</Text>
</Box>
//=> 'Helloβ¦'
<Box width={7}>
<Text wrap="truncate-middle">Hello World</Text>
</Box>
//=> 'Heβ¦ld'
<Box width={7}>
<Text wrap="truncate-start">Hello World</Text>
</Box>
//=> 'β¦World'
<Box>
<Box>
is an essential Ink component to build your layout.
It's like <div style="display: flex">
in the browser.
import {render, Box, Text} from 'ink';
const Example = () => (
<Box margin={2}>
<Text>This is a box with margin</Text>
</Box>
);
render(<Example />);
Dimensions
width
Type: number
string
Width of the element in spaces. You can also set it in percent, which will calculate the width based on the width of parent element.
<Box width={4}>
<Text>X</Text>
</Box>
//=> 'X '
<Box width={10}>
<Box width="50%">
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
//=> 'X Y'
height
Type: number
string
Height of the element in lines (rows). You can also set it in percent, which will calculate the height based on the height of parent element.
<Box height={4}>
<Text>X</Text>
</Box>
//=> 'X\n\n\n'
<Box height={6} flexDirection="column">
<Box height="50%">
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
//=> 'X\n\n\nY\n\n'
minWidth
Type: number
Sets a minimum width of the element. Percentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.
minHeight
Type: number
Sets a minimum height of the element. Percentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.
Padding
paddingTop
Type: number
Default: 0
Top padding.
paddingBottom
Type: number
Default: 0
Bottom padding.
paddingLeft
Type: number
Default: 0
Left padding.
paddingRight
Type: number
Default: 0
Right padding.
paddingX
Type: number
Default: 0
Horizontal padding. Equivalent to setting paddingLeft
and paddingRight
.
paddingY
Type: number
Default: 0
Vertical padding. Equivalent to setting paddingTop
and paddingBottom
.
padding
Type: number
Default: 0
Padding on all sides. Equivalent to setting paddingTop
, paddingBottom
, paddingLeft
and paddingRight
.
<Box paddingTop={2}>Top</Box>
<Box paddingBottom={2}>Bottom</Box>
<Box paddingLeft={2}>Left</Box>
<Box paddingRight={2}>Right</Box>
<Box paddingX={2}>Left and right</Box>
<Box paddingY={2}>Top and bottom</Box>
<Box padding={2}>Top, bottom, left and right</Box>
Margin
marginTop
Type: number
Default: 0
Top margin.
marginBottom
Type: number
Default: 0
Bottom margin.
marginLeft
Type: number
Default: 0
Left margin.
marginRight
Type: number
Default: 0
Right margin.
marginX
Type: number
Default: 0
Horizontal margin. Equivalent to setting marginLeft
and marginRight
.
marginY
Type: number
Default: 0
Vertical margin. Equivalent to setting marginTop
and marginBottom
.
margin
Type: number
Default: 0
Margin on all sides. Equivalent to setting marginTop
, marginBottom
, marginLeft
and marginRight
.
<Box marginTop={2}>Top</Box>
<Box marginBottom={2}>Bottom</Box>
<Box marginLeft={2}>Left</Box>
<Box marginRight={2}>Right</Box>
<Box marginX={2}>Left and right</Box>
<Box marginY={2}>Top and bottom</Box>
<Box margin={2}>Top, bottom, left and right</Box>
Gap
gap
Type: number
Default: 0
Size of the gap between an element's columns and rows. Shorthand for columnGap
and rowGap
.
<Box gap={1} width={3} flexWrap="wrap">
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</Box>
// A B
//
// C
columnGap
Type: number
Default: 0
Size of the gap between an element's columns.
<Box columnGap={1}>
<Text>A</Text>
<Text>B</Text>
</Box>
// A B
rowGap
Type: number
Default: 0
Size of the gap between element's rows.
<Box flexDirection="column" rowGap={1}>
<Text>A</Text>
<Text>B</Text>
</Box>
// A
//
// B
Flex
flexGrow
Type: number
Default: 0
See flex-grow.
<Box>
<Text>Label:</Text>
<Box flexGrow={1}>
<Text>Fills all remaining space</Text>
</Box>
</Box>
flexShrink
Type: number
Default: 1
See flex-shrink.
<Box width={20}>
<Box flexShrink={2} width={10}>
<Text>Will be 1/4</Text>
</Box>
<Box width={10}>
<Text>Will be 3/4</Text>
</Box>
</Box>
flexBasis
Type: number
string
See flex-basis.
<Box width={6}>
<Box flexBasis={3}>
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
//=> 'X Y'
<Box width={6}>
<Box flexBasis="50%">
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
//=> 'X Y'
flexDirection
Type: string
Allowed values: row
row-reverse
column
column-reverse
See flex-direction.
<Box>
<Box marginRight={1}>
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
// X Y
<Box flexDirection="row-reverse">
<Text>X</Text>
<Box marginRight={1}>
<Text>Y</Text>
</Box>
</Box>
// Y X
<Box flexDirection="column">
<Text>X</Text>
<Text>Y</Text>
</Box>
// X
// Y
<Box flexDirection="column-reverse">
<Text>X</Text>
<Text>Y</Text>
</Box>
// Y
// X
flexWrap
Type: string
Allowed values: nowrap
wrap
wrap-reverse
See flex-wrap.
<Box width={2} flexWrap="wrap">
<Text>A</Text>
<Text>BC</Text>
</Box>
// A
// B C
<Box flexDirection="column" height={2} flexWrap="wrap">
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</Box>
// A C
// B
alignItems
Type: string
Allowed values: flex-start
center
flex-end
See align-items.
<Box alignItems="flex-start">
<Box marginRight={1}>
<Text>X</Text>
</Box>
<Text>
A
<Newline/>
B
<Newline/>
C
</Text>
</Box>
// X A
// B
// C
<Box alignItems="center">
<Box marginRight={1}>
<Text>X</Text>
</Box>
<Text>
A
<Newline/>
B
<Newline/>
C
</Text>
</Box>
// A
// X B
// C
<Box alignItems="flex-end">
<Box marginRight={1}>
<Text>X</Text>
</Box>
<Text>
A
<Newline/>
B
<Newline/>
C
</Text>
</Box>
// A
// B
// X C
alignSelf
Type: string
Default: auto
Allowed values: auto
flex-start
center
flex-end
See align-self.
<Box height={3}>
<Box alignSelf="flex-start">
<Text>X</Text>
</Box>
</Box>
// X
//
//
<Box height={3}>
<Box alignSelf="center">
<Text>X</Text>
</Box>
</Box>
//
// X
//
<Box height={3}>
<Box alignSelf="flex-end">
<Text>X</Text>
</Box>
</Box>
//
//
// X
justifyContent
Type: string
Allowed values: flex-start
center
flex-end
space-between
space-around
space-evenly
See justify-content.
<Box justifyContent="flex-start">
<Text>X</Text>
</Box>
// [X ]
<Box justifyContent="center">
<Text>X</Text>
</Box>
// [ X ]
<Box justifyContent="flex-end">
<Text>X</Text>
</Box>
// [ X]
<Box justifyContent="space-between">
<Text>X</Text>
<Text>Y</Text>
</Box>
// [X Y]
<Box justifyContent="space-around">
<Text>X</Text>
<Text>Y</Text>
</Box>
// [ X Y ]
<Box justifyContent="space-evenly">
<Text>X</Text>
<Text>Y</Text>
</Box>
// [ X Y ]
Visibility
display
Type: string
Allowed values: flex
none
Default: flex
Set this property to none
to hide the element.
overflowX
Type: string
Allowed values: visible
hidden
Default: visible
Behavior for an element's overflow in horizontal direction.
overflowY
Type: string
Allowed values: visible
hidden
Default: visible
Behavior for an element's overflow in vertical direction.
overflow
Type: string
Allowed values: visible
hidden
Default: visible
Shortcut for setting overflowX
and overflowY
at the same time.
Borders
borderStyle
Type: string
Allowed values: single
double
round
bold
singleDouble
doubleSingle
classic
| BoxStyle
Add a border with a specified style.
If borderStyle
is undefined
(which it is by default), no border will be added.
Ink uses border styles from cli-boxes
module.
<Box flexDirection="column">
<Box>
<Box borderStyle="single" marginRight={2}>
<Text>single</Text>
</Box>
<Box borderStyle="double" marginRight={2}>
<Text>double</Text>
</Box>
<Box borderStyle="round" marginRight={2}>
<Text>round</Text>
</Box>
<Box borderStyle="bold">
<Text>bold</Text>
</Box>
</Box>
<Box marginTop={1}>
<Box borderStyle="singleDouble" marginRight={2}>
<Text>singleDouble</Text>
</Box>
<Box borderStyle="doubleSingle" marginRight={2}>
<Text>doubleSingle</Text>
</Box>
<Box borderStyle="classic">
<Text>classic</Text>
</Box>
</Box>
</Box>
Alternatively, pass a custom border style like so:
<Box
borderStyle={{
topLeft: 'β',
top: 'β',
topRight: 'β',
left: 'β',
bottomLeft: 'β',
bottom: 'β',
bottomRight: 'β',
right: 'β'
}}
>
<Text>Custom</Text>
</Box>
See example in examples/borders.
borderColor
Type: string
Change border color.
Shorthand for setting borderTopColor
, borderRightColor
, borderBottomColor
and borderLeftColor
.
<Box borderStyle="round" borderColor="green">
<Text>Green Rounded Box</Text>
</Box>
borderTopColor
Type: string
Change top border color.
Accepts the same values as color
in <Text>
component.
<Box borderStyle="round" borderTopColor="green">
<Text>Hello world</Text>
</Box>
borderRightColor
Type: string
Change right border color.
Accepts the same values as color
in <Text>
component.
<Box borderStyle="round" borderRightColor="green">
<Text>Hello world</Text>
</Box>
borderRightColor
Type: string
Change right border color.
Accepts the same values as color
in <Text>
component.
<Box borderStyle="round" borderRightColor="green">
<Text>Hello world</Text>
</Box>
borderBottomColor
Type: string
Change bottom border color.
Accepts the same values as color
in <Text>
component.
<Box borderStyle="round" borderBottomColor="green">
<Text>Hello world</Text>
</Box>
borderLeftColor
Type: string
Change left border color.
Accepts the same values as color
in <Text>
component.
<Box borderStyle="round" borderLeftColor="green">
<Text>Hello world</Text>
</Box>
borderDimColor
Type: boolean
Default: false
Dim the border color.
Shorthand for setting borderTopDimColor
, borderBottomDimColor
, borderLeftDimColor
and borderRightDimColor
.
<Box borderStyle="round" borderDimColor>
<Text>Hello world</Text>
</Box>
borderTopDimColor
Type: boolean
Default: false
Dim the top border color.
<Box borderStyle="round" borderTopDimColor>
<Text>Hello world</Text>
</Box>
borderBottomDimColor
Type: boolean
Default: false
Dim the bottom border color.
<Box borderStyle="round" borderBottomDimColor>
<Text>Hello world</Text>
</Box>
borderLeftDimColor
Type: boolean
Default: false
Dim the left border color.
<Box borderStyle="round" borderLeftDimColor>
<Text>Hello world</Text>
</Box>
borderRightDimColor
Type: boolean
Default: false
Dim the right border color.
<Box borderStyle="round" borderRightDimColor>
<Text>Hello world</Text>
</Box>
borderTop
Type: boolean
Default: true
Determines whether top border is visible.
borderRight
Type: boolean
Default: true
Determines whether right border is visible.
borderBottom
Type: boolean
Default: true
Determines whether bottom border is visible.
borderLeft
Type: boolean
Default: true
Determines whether left border is visible.
<Newline>
Adds one or more newline (\n
) characters.
Must be used within <Text>
components.
count
Type: number
Default: 1
Number of newlines to insert.
import {render, Text, Newline} from 'ink';
const Example = () => (
<Text>
<Text color="green">Hello</Text>
<Newline />
<Text color="red">World</Text>
</Text>
);
render(<Example />);
Output:
Hello
World
<Spacer>
A flexible space that expands along the major axis of its containing layout. It's useful as a shortcut for filling all the available spaces between elements.
For example, using <Spacer>
in a <Box>
with default flex direction (row
) will position "Left" on the left side and will push "Right" to the right side.
import {render, Box, Text, Spacer} from 'ink';
const Example = () => (
<Box>
<Text>Left</Text>
<Spacer />
<Text>Right</Text>
</Box>
);
render(<Example />);
In a vertical flex direction (column
), it will position "Top" to the top of the container and push "Bottom" to the bottom of it.
Note, that container needs to be tall to enough to see this in effect.
import {render, Box, Text, Spacer} from 'ink';
const Example = () => (
<Box flexDirection="column" height={10}>
<Text>Top</Text>
<Spacer />
<Text>Bottom</Text>
</Box>
);
render(<Example />);
<Static>
<Static>
component permanently renders its output above everything else.
It's useful for displaying activity like completed tasks or logs - things that
are not changing after they're rendered (hence the name "Static").
It's preferred to use <Static>
for use cases like these, when you can't know
or control the amount of items that need to be rendered.
For example, Tap uses <Static>
to display
a list of completed tests. Gatsby uses it
to display a list of generated pages, while still displaying a live progress bar.
import React, {useState, useEffect} from 'react';
import {render, Static, Box, Text} from 'ink';
const Example = () => {
const [tests, setTests] = useState([]);
useEffect(() => {
let completedTests = 0;
let timer;
const run = () => {
// Fake 10 completed tests
if (completedTests++ < 10) {
setTests(previousTests => [
...previousTests,
{
id: previousTests.length,
title: `Test #${previousTests.length + 1}`
}
]);
timer = setTimeout(run, 100);
}
};
run();
return () => {
clearTimeout(timer);
};
}, []);
return (
<>
{/* This part will be rendered once to the terminal */}
<Static items={tests}>
{test => (
<Box key={test.id}>
<Text color="green">β {test.title}</Text>
</Box>
)}
</Static>
{/* This part keeps updating as state changes */}
<Box marginTop={1}>
<Text dimColor>Completed tests: {tests.length}</Text>
</Box>
</>
);
};
render(<Example />);
Note: <Static>
only renders new items in items
prop and ignores items
that were previously rendered. This means that when you add new items to items
array, changes you make to previous items will not trigger a rerender.
See examples/static for an example usage of <Static>
component.
items
Type: Array
Array of items of any type to render using a function you pass as a component child.
style
Type: object
Styles to apply to a container of child elements.
See <Box>
for supported properties.
<Static items={...} style={{padding: 1}}>
{...}
</Static>
children(item)
Type: Function
Function that is called to render every item in items
array.
First argument is an item itself and second argument is index of that item in
items
array.
Note that key
must be assigned to the root component.
<Static items={['a', 'b', 'c']}>
{(item, index) => {
// This function is called for every item in ['a', 'b', 'c']
// `item` is 'a', 'b', 'c'
// `index` is 0, 1, 2
return (
<Box key={index}>
<Text>Item: {item}</Text>
</Box>
);
}}
</Static>
<Transform>
Transform a string representation of React components before they are written to output.
For example, you might want to apply a gradient to text, add a clickable link or create some text effects.
These use cases can't accept React nodes as input, they are expecting a string.
That's what <Transform>
component does, it gives you an output string of its child components and lets you transform it in any way.
Note: <Transform>
must be applied only to <Text>
children components and shouldn't change the dimensions of the output, otherwise layout will be incorrect.
import {render, Transform} from 'ink';
const Example = () => (
<Transform transform={output => output.toUpperCase()}>
<Text>Hello World</Text>
</Transform>
);
render(<Example />);
Since transform
function converts all characters to upper case, final output that's rendered to the terminal will be "HELLO WORLD", not "Hello World".
When the output wraps to multiple lines, it can be helpful to know which line is being processed.
For example, to implement a hanging indent component, you can indent all the lines except for the first.
import {render, Transform} from 'ink';
const HangingIndent = ({content, indent = 4, children, ...props}) => (
<Transform
transform={(line, index) =>
index === 0 ? line : ' '.repeat(indent) + line
}
{...props}
>
{children}
</Transform>
);
const text =
'WHEN I WROTE the following pages, or rather the bulk of them, ' +
'I lived alone, in the woods, a mile from any neighbor, in a ' +
'house which I had built myself, on the shore of Walden Pond, ' +
'in Concord, Massachusetts, and earned my living by the labor ' +
'of my hands only. I lived there two years and two months. At ' +
'present I am a sojourner in civilized life again.';
// Other text properties are allowed as well
render(
<HangingIndent bold dimColor indent={4}>
{text}
</HangingIndent>
);
transform(outputLine, index)
Type: Function
Function which transforms children output. It accepts children and must return transformed children too.
children
Type: string
Output of child components.
index
Type: number
The zero-indexed line number of the line currently being transformed.
Hooks
useInput(inputHandler, options?)
This hook is used for handling user input.
It's a more convenient alternative to using useStdin
and listening to data
events.
The callback you pass to useInput
is called for each character when user enters any input.
However, if user pastes text and it's more than one character, the callback will be called only once and the whole string will be passed as input
.
You can find a full example of using useInput
at examples/use-input.
import {useInput} from 'ink';
const UserInput = () => {
useInput((input, key) => {
if (input === 'q') {
// Exit program
}
if (key.leftArrow) {
// Left arrow key pressed
}
});
return β¦
};
inputHandler(input, key)
Type: Function
The handler function that you pass to useInput
receives two arguments:
input
Type: string
The input that the program received.
key
Type: object
Handy information about a key that was pressed.
key.leftArrow
key.rightArrow
key.upArrow
key.downArrow
Type: boolean
Default: false
If an arrow key was pressed, the corresponding property will be true
.
For example, if user presses left arrow key, key.leftArrow
equals true
.
key.return
Type: boolean
Default: false
Return (Enter) key was pressed.
key.escape
Type: boolean
Default: false
Escape key was pressed.
key.ctrl
Type: boolean
Default: false
Ctrl key was pressed.
key.shift
Type: boolean
Default: false
Shift key was pressed.
key.tab
Type: boolean
Default: false
Tab key was pressed.
key.backspace
Type: boolean
Default: false
Backspace key was pressed.
key.delete
Type: boolean
Default: false
Delete key was pressed.
key.pageDown
key.pageUp
Type: boolean
Default: false
If Page Up or Page Down key was pressed, the corresponding property will be true
.
For example, if user presses Page Down, key.pageDown
equals true
.
key.meta
Type: boolean
Default: false
Meta key was pressed.
options
Type: object
isActive
Type: boolean
Default: true
Enable or disable capturing of user input.
Useful when there are multiple useInput
hooks used at once to avoid handling the same input several times.
useApp()
useApp
is a React hook, which exposes a method to manually exit the app (unmount).
exit(error?)
Type: Function
Exit (unmount) the whole Ink app.
error
Type: Error
Optional error. If passed, waitUntilExit
will reject with that error.
import {useApp} from 'ink';
const Example = () => {
const {exit} = useApp();
// Exit the app after 5 seconds
useEffect(() => {
setTimeout(() => {
exit();
}, 5000);
}, []);
return β¦
};
useStdin()
useStdin
is a React hook, which exposes stdin stream.
stdin
Type: stream.Readable
Default: process.stdin
Stdin stream passed to render()
in options.stdin
or process.stdin
by default.
Useful if your app needs to handle user input.
import {useStdin} from 'ink';
const Example = () => {
const {stdin} = useStdin();
return β¦
};
isRawModeSupported
Type: boolean
A boolean flag determining if the current stdin
supports setRawMode
.
A component using setRawMode
might want to use isRawModeSupported
to nicely fall back in environments where raw mode is not supported.
import {useStdin} from 'ink';
const Example = () => {
const {isRawModeSupported} = useStdin();
return isRawModeSupported ? (
<MyInputComponent />
) : (
<MyComponentThatDoesntUseInput />
);
};
setRawMode(isRawModeEnabled)
Type: function
isRawModeEnabled
Type: boolean
See setRawMode
.
Ink exposes this function to be able to handle Ctrl+C, that's why you should use Ink's setRawMode
instead of process.stdin.setRawMode
.
Warning: This function will throw unless the current stdin
supports setRawMode
. Use isRawModeSupported
to detect setRawMode
support.
import {useStdin} from 'ink';
const Example = () => {
const {setRawMode} = useStdin();
useEffect(() => {
setRawMode(true);
return () => {
setRawMode(false);
};
});
return β¦
};
useStdout()
useStdout
is a React hook, which exposes stdout stream, where Ink renders your app.
stdout
Type: stream.Writable
Default: process.stdout
import {useStdout} from 'ink';
const Example = () => {
const {stdout} = useStdout();
return β¦
};
write(data)
Write any string to stdout, while preserving Ink's output.
It's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two.
It's similar to <Static>
, except it can't accept components, it only works with strings.
data
Type: string
Data to write to stdout.
import {useStdout} from 'ink';
const Example = () => {
const {write} = useStdout();
useEffect(() => {
// Write a single message to stdout, above Ink's output
write('Hello from Ink to stdout\n');
}, []);
return β¦
};
See additional usage example in examples/use-stdout.
useStderr()
useStderr
is a React hook, which exposes stderr stream.
stderr
Type: stream.Writable
Default: process.stderr
Stderr stream.
import {useStderr} from 'ink';
const Example = () => {
const {stderr} = useStderr();
return β¦
};
write(data)
Write any string to stderr, while preserving Ink's output.
It's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two.
It's similar to <Static>
, except it can't accept components, it only works with strings.
data
Type: string
Data to write to stderr.
import {useStderr} from 'ink';
const Example = () => {
const {write} = useStderr();
useEffect(() => {
// Write a single message to stderr, above Ink's output
write('Hello from Ink to stderr\n');
}, []);
return β¦
};
useFocus(options?)
Component that uses useFocus
hook becomes "focusable" to Ink, so when user presses Tab, Ink will switch focus to this component.
If there are multiple components that execute useFocus
hook, focus will be given to them in the order that these components are rendered in.
This hook returns an object with isFocused
boolean property, which determines if this component is focused or not.
options
autoFocus
Type: boolean
Default: false
Auto focus this component, if there's no active (focused) component right now.
isActive
Type: boolean
Default: true
Enable or disable this component's focus, while still maintaining its position in the list of focusable components. This is useful for inputs that are temporarily disabled.
id
Type: string
Required: false
Set a component's focus ID, which can be used to programmatically focus the component. This is useful for large interfaces with many focusable elements, to avoid having to cycle through all of them.
import {render, useFocus, Text} from 'ink';
const Example = () => {
const {isFocused} = useFocus();
return <Text>{isFocused ? 'I am focused' : 'I am not focused'}</Text>;
};
render(<Example />);
See example in examples/use-focus and examples/use-focus-with-id.
useFocusManager()
This hook exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.
enableFocus()
Enable focus management for all components.
Note: You don't need to call this method manually, unless you've disabled focus management. Focus management is enabled by default.
import {useFocusManager} from 'ink';
const Example = () => {
const {enableFocus} = useFocusManager();
useEffect(() => {
enableFocus();
}, []);
return β¦
};
disableFocus()
Disable focus management for all components. Currently active component (if there's one) will lose its focus.
import {useFocusManager} from 'ink';
const Example = () => {
const {disableFocus} = useFocusManager();
useEffect(() => {
disableFocus();
}, []);
return β¦
};
focusNext()
Switch focus to the next focusable component. If there's no active component right now, focus will be given to the first focusable component. If active component is the last in the list of focusable components, focus will be switched to the first active component.
Note: Ink calls this method when user presses Tab.
import {useFocusManager} from 'ink';
const Example = () => {
const {focusNext} = useFocusManager();
useEffect(() => {
focusNext();
}, []);
return β¦
};
focusPrevious()
Switch focus to the previous focusable component. If there's no active component right now, focus will be given to the first focusable component. If active component is the first in the list of focusable components, focus will be switched to the last component.
Note: Ink calls this method when user presses Shift+Tab.
import {useFocusManager} from 'ink';
const Example = () => {
const {focusPrevious} = useFocusManager();
useEffect(() => {
focusPrevious();
}, []);
return β¦
};
focus(id)
id
Type: string
Switch focus to the component with the given id
.
If there's no component with that ID, focus will be given to the next focusable component.
import {useFocusManager, useInput} from 'ink';
const Example = () => {
const {focus} = useFocusManager();
useInput(input => {
if (input === 's') {
// Focus the component with focus ID 'someId'
focus('someId');
}
});
return β¦
};
API
render(tree, options?)
Returns: Instance
Mount a component and render the output.
tree
Type: ReactElement
options
Type: object
stdout
Type: stream.Writable
Default: process.stdout
Output stream where app will be rendered.
stdin
Type: stream.Readable
Default: process.stdin
Input stream where app will listen for input.
exitOnCtrlC
Type: boolean
Default: true
Configure whether Ink should listen to Ctrl+C keyboard input and exit the app.
This is needed in case process.stdin
is in raw mode, because then Ctrl+C is ignored by default and process is expected to handle it manually.
patchConsole
Type: boolean
Default: true
Patch console methods to ensure console output doesn't mix with Ink output.
When any of console.*
methods are called (like console.log()
), Ink intercepts their output, clears main output, renders output from the console method and then rerenders main output again.
That way both are visible and are not overlapping each other.
This functionality is powered by patch-console, so if you need to disable Ink's interception of output but want to build something custom, you can use it.
debug
Type: boolean
Default: false
If true
, each update will be rendered as a separate output, without replacing the previous one.
Instance
This is the object that render()
returns.
rerender(tree)
Replace previous root node with a new one or update props of the current root node.
tree
Type: ReactElement
// Update props of the root node
const {rerender} = render(<Counter count={1} />);
rerender(<Counter count={2} />);
// Replace root node
const {rerender} = render(<OldCounter />);
rerender(<NewCounter />);
unmount()
Manually unmount the whole Ink app.
const {unmount} = render(<MyApp />);
unmount();
waitUntilExit()
Returns a promise, which resolves when app is unmounted.
const {unmount, waitUntilExit} = render(<MyApp />);
setTimeout(unmount, 1000);
await waitUntilExit(); // resolves after `unmount()` is called
clear()
Clear output.
const {clear} = render(<MyApp />);
clear();
measureElement(ref)
Measure the dimensions of a particular <Box>
element.
It returns an object with width
and height
properties.
This function is useful when your component needs to know the amount of available space it has. You could use it when you need to change the layout based on the length of its content.
Note: measureElement()
returns correct results only after the initial render, when layout has been calculated. Until then, width
and height
equal to zero. It's recommended to call measureElement()
in a useEffect
hook, which fires after the component has rendered.
ref
Type: MutableRef
A reference to a <Box>
element captured with a ref
property.
See Refs for more information on how to capture references.
import {render, measureElement, Box, Text} from 'ink';
const Example = () => {
const ref = useRef();
useEffect(() => {
const {width, height} = measureElement(ref.current);
// width = 100, height = 1
}, []);
return (
<Box width={100}>
<Box ref={ref}>
<Text>This box will stretch to 100 width</Text>
</Box>
</Box>
);
};
render(<Example />);
Testing
Ink components are simple to test with ink-testing-library. Here's a simple example that checks how component is rendered:
import React from 'react';
import {Text} from 'ink';
import {render} from 'ink-testing-library';
const Test = () => <Text>Hello World</Text>;
const {lastFrame} = render(<Test />);
lastFrame() === 'Hello World'; //=> true
Check out ink-testing-library for more examples and full documentation.
Using React Devtools
Ink supports React Devtools out-of-the-box. To enable integration with React Devtools in your Ink-based CLI, first ensure you have installed the optional react-devtools-core
dependency, and then run your app with DEV=true
environment variable:
DEV=true my-cli
Then, start React Devtools itself:
npx react-devtools
After it starts up, you should see the component tree of your CLI. You can even inspect and change the props of components, and see the results immediatelly in the CLI, without restarting it.
Note: You must manually quit your CLI via Ctrl+C after you're done testing.
Useful Components
- ink-text-input - Text input.
- ink-spinner - Spinner.
- ink-select-input - Select (dropdown) input.
- ink-link - Link.
- ink-gradient - Gradient color.
- ink-big-text - Awesome text.
- ink-image - Display images inside the terminal.
- ink-tab - Tab.
- ink-color-pipe - Create color text with simpler style strings.
- ink-multi-select - Select one or more values from a list
- ink-divider - A divider.
- ink-progress-bar - Progress bar.
- ink-table - Table.
- ink-ascii - Awesome text component with more font choices, based on Figlet.
- ink-markdown - Render syntax highlighted Markdown.
- ink-quicksearch-input - Select component with fast quicksearch-like navigation.
- ink-confirm-input - Yes/No confirmation input.
- ink-syntax-highlight - Code syntax highlighting.
- ink-form - Form.
- ink-task-list - Task list.
Useful Hooks
- ink-use-stdout-dimensions - Subscribe to stdout dimensions.
Examples
The examples
directory contains a set of real examples. You can run them with:
npm run example examples/[example name]
# e.g. npm run example examples/borders
- Jest - Implementation of basic Jest UI (live demo).
- Counter - Simple counter that increments every 100ms (live demo).
- Form with validation - Manage form state using Final Form.
- Borders - Add borders to
<Box>
component. - Suspense - Use React Suspense.
- Table - Render a table with multiple columns and rows.
- Focus management - Use
useFocus
hook to manage focus between components. - User input - Listen to user input.
- Write to stdout - Write to stdout bypassing main Ink output.
- Write to stderr - Write to stderr bypassing main Ink output.
- Static - Use
<Static>
to render permanent output. - Child process - Render output from a child process.
Maintainers
More Resourcesto explore the angular.
mail [email protected] to add your project or resources here π₯.
- 1React Community β React
https://react.dev/community
The library for web and native user interfaces
- 2Patterns.dev
https://www.patterns.dev/
Learn JavaScript design and performance patterns for building more powerful web applications.
- 3React
https://react.dev/
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
- 4Quick Start β React
https://react.dev/learn
The library for web and native user interfaces
- 5Snack - React Native in the browser
https://snack.expo.dev/
Write code in Expo's online editor and instantly use it on your phone.
- 6React JavaScript Tutorial in Visual Studio Code
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
React JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the Visual Studio Code editor.
- 7Overview Β· React Native
https://reactnative.dev/community/overview
The React Native Community
- 8React Native Β· Learn once, write anywhere
https://reactnative.dev/
A framework for building native apps using React
- 9React Conferences β React
https://react.dev/community/conferences
The library for web and native user interfaces
- 10React - CodeSandbox
https://codesandbox.io/s/new
React example starter project
- 11React friendly API wrapper around MapboxGL JS
https://github.com/visgl/react-map-gl
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.
- 12React components for Leaflet maps
https://github.com/PaulLeCam/react-leaflet
React components for Leaflet maps. Contribute to PaulLeCam/react-leaflet development by creating an account on GitHub.
- 13The visual editor for React
https://github.com/measuredco/puck
The visual editor for React. Contribute to measuredco/puck development by creating an account on GitHub.
- 14π Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
https://github.com/mkosir/react-parallax-tilt
π Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) - mkosir/react-parallax-tilt
- 15Fast, easy and reliable testing for anything that runs in a browser.
https://github.com/cypress-io/cypress
Fast, easy and reliable testing for anything that runs in a browser. - cypress-io/cypress
- 16π¨π A React renderer for Three.js
https://github.com/pmndrs/react-three-fiber
π¨π A React renderer for Three.js. Contribute to pmndrs/react-three-fiber development by creating an account on GitHub.
- 17Create skeleton screens that automatically adapt to your app!
https://github.com/dvtng/react-loading-skeleton
Create skeleton screens that automatically adapt to your app! - dvtng/react-loading-skeleton
- 18Open source, production-ready animation and gesture library for React
https://github.com/framer/motion
Open source, production-ready animation and gesture library for React - framer/motion
- 19The recommended Code Splitting library for React βοΈβ¨
https://github.com/gregberge/loadable-components
The recommended Code Splitting library for React βοΈβ¨ - gregberge/loadable-components
- 20A collection of composable React components for building interactive data visualizations
https://github.com/FormidableLabs/victory
A collection of composable React components for building interactive data visualizations - FormidableLabs/victory
- 21TW Elements integration with React - Free Examples & Tutorial
https://tw-elements.com/docs/standard/integrations/react-integration/
This article shows you how to integrate React application with TW Elements. Free download, open source license.
- 22π€ Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://github.com/TanStack/router
π€ Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
- 23π₯ Make videos programmatically with React
https://github.com/remotion-dev/remotion
π₯ Make videos programmatically with React. Contribute to remotion-dev/remotion development by creating an account on GitHub.
- 24The HTML touch slider carousel with the most native feeling you will get.
https://github.com/rcbyr/keen-slider
The HTML touch slider carousel with the most native feeling you will get. - rcbyr/keen-slider
- 25A JS library for predictable global state management
https://github.com/reduxjs/redux
A JS library for predictable global state management - reduxjs/redux
- 26Simple reusable React error boundary component
https://github.com/bvaughn/react-error-boundary
Simple reusable React error boundary component. Contribute to bvaughn/react-error-boundary development by creating an account on GitHub.
- 27Declarative routing for React
https://github.com/remix-run/react-router
Declarative routing for React. Contribute to remix-run/react-router development by creating an account on GitHub.
- 28Personal blog by Dan Abramov.
https://github.com/gaearon/overreacted.io
Personal blog by Dan Abramov. Contribute to gaearon/overreacted.io development by creating an account on GitHub.
- 29Next generation frontend tooling. It's fast!
https://github.com/vitejs/vite
Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.
- 30React Hooks for Data Fetching
https://github.com/vercel/swr
React Hooks for Data Fetching. Contribute to vercel/swr development by creating an account on GitHub.
- 31π Create PDF files using React
https://github.com/diegomura/react-pdf
π Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.
- 32nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://github.com/plouc/nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries - plouc/nivo
- 33Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
https://github.com/facebookexperimental/Recoil
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features o...
- 34[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
https://github.com/expo/router
[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps - expo/router
- 35π‘οΈ βοΈ A simple, scalable, and powerful architecture for building production ready React applications.
https://github.com/alan2207/bulletproof-react
π‘οΈ βοΈ A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: π‘οΈ βοΈ A simple, scalable, and powerful architecture for...
- 36The Select Component for React.js
https://github.com/JedWatson/react-select
The Select Component for React.js. Contribute to JedWatson/react-select development by creating an account on GitHub.
- 37Toolkit for building accessible web apps with React
https://github.com/ariakit/ariakit
Toolkit for building accessible web apps with React - ariakit/ariakit
- 38Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π
https://github.com/styled-components/styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π - styled-components/styled-components
- 39Create the next immutable state by mutating the current one
https://github.com/immerjs/immer
Create the next immutable state by mutating the current one - immerjs/immer
- 40An open-source, cross-platform terminal for seamless workflows
https://github.com/wavetermdev/waveterm
An open-source, cross-platform terminal for seamless workflows - wavetermdev/waveterm
- 41Isolated React component development environment with a living style guide
https://github.com/styleguidist/react-styleguidist
Isolated React component development environment with a living style guide - styleguidist/react-styleguidist
- 42π― visx | visualization components
https://github.com/airbnb/visx
π― visx | visualization components. Contribute to airbnb/visx development by creating an account on GitHub.
- 43Build forms in React, without the tears π
https://github.com/jaredpalmer/formik
Build forms in React, without the tears π . Contribute to jaredpalmer/formik development by creating an account on GitHub.
- 44Routing and navigation for your React Native apps
https://github.com/react-navigation/react-navigation
Routing and navigation for your React Native apps. Contribute to react-navigation/react-navigation development by creating an account on GitHub.
- 45The library for web and native user interfaces.
https://github.com/facebook/react
The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.
- 46πΉ Draw arrows between React elements π
https://github.com/pierpo/react-archer
πΉ Draw arrows between React elements π. Contribute to pierpo/react-archer development by creating an account on GitHub.
- 47The React Framework
https://github.com/vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
- 48Winamp 2 reimplemented for the browser
https://github.com/captbaritone/webamp
Winamp 2 reimplemented for the browser. Contribute to captbaritone/webamp development by creating an account on GitHub.
- 49The best React-based framework with performance, scalability and security built in.
https://github.com/gatsbyjs/gatsby
The best React-based framework with performance, scalability and security built in. - gatsbyjs/gatsby
- 50Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
https://github.com/reactjs/react-rails
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. - reactjs/react-rails
- 51The monorepo home to all of the FormatJS related libraries, most notably react-intl.
https://github.com/formatjs/formatjs
The monorepo home to all of the FormatJS related libraries, most notably react-intl. - formatjs/formatjs
- 52Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://github.com/microsoft/fluentui
Fluent UI web represents a collection of utilities, React components, and web components for building web applications. - microsoft/fluentui
- 53π€ Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://github.com/TanStack/query
π€ Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
- 54Simple, scalable state management.
https://github.com/mobxjs/mobx
Simple, scalable state management. Contribute to mobxjs/mobx development by creating an account on GitHub.
- 55A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://github.com/formkit/auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. - formkit/auto-animate
- 56Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://github.com/remix-run/remix
Build Better Websites. Create modern, resilient user experiences with web fundamentals. - remix-run/remix
- 57svg react icons of popular icon packs
https://github.com/react-icons/react-icons
svg react icons of popular icon packs. Contribute to react-icons/react-icons development by creating an account on GitHub.
- 58π©βπ€ CSS-in-JS library designed for high performance style composition
https://github.com/emotion-js/emotion
π©βπ€ CSS-in-JS library designed for high performance style composition - emotion-js/emotion
- 59Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://github.com/shadcn-ui/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/ui
- 60:rocket: Β A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://github.com/apollographql/apollo-client
:rocket: Β A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. - apollographql/apollo-client
- 61Vest β Declarative validations framework
https://github.com/ealush/vest
Vest β Declarative validations framework. Contribute to ealush/vest development by creating an account on GitHub.
- 62Set up a modern web app by running one command.
https://github.com/facebook/create-react-app
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
- 63A React component for Instagram like stories
https://github.com/mohitk05/react-insta-stories
A React component for Instagram like stories. Contribute to mohitk05/react-insta-stories development by creating an account on GitHub.
- 64β€οΈ A heart-shaped toggle switch component for React.
https://github.com/anatoliygatt/heart-switch
β€οΈ A heart-shaped toggle switch component for React. - anatoliygatt/heart-switch
- 65why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
https://github.com/welldone-software/why-did-you-render
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) - welldone-software/why-did-you-render
- 66Relay is a JavaScript framework for building data-driven React applications.
https://github.com/facebook/relay
Relay is a JavaScript framework for building data-driven React applications. - facebook/relay
- 67The Fullstack Tutorial for GraphQL
https://github.com/howtographql/howtographql
The Fullstack Tutorial for GraphQL. Contribute to howtographql/howtographql development by creating an account on GitHub.
- 68The compiler for ReScript.
https://github.com/rescript-lang/rescript-compiler
The compiler for ReScript. Contribute to rescript-lang/rescript-compiler development by creating an account on GitHub.
- 69A JavaScript library to position floating elements and create interactions for them.
https://github.com/floating-ui/floating-ui
A JavaScript library to position floating elements and create interactions for them. - floating-ui/floating-ui
- 70Data Visualization Components
https://github.com/uber/react-vis
Data Visualization Components. Contribute to uber/react-vis development by creating an account on GitHub.
- 71The lightweight and flexible Cookie Consent Banner
https://github.com/porscheofficial/cookie-consent-banner
The lightweight and flexible Cookie Consent Banner - porscheofficial/cookie-consent-banner
- 72Sandbox for developing and testing UI components in isolation
https://github.com/react-cosmos/react-cosmos
Sandbox for developing and testing UI components in isolation - react-cosmos/react-cosmos
- 73π±π 𧩠Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://github.com/alibaba/formily
π±π 𧩠Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 - alibaba/formily
- 74fast, portable, and extensible cmd+k interface for your site
https://github.com/timc1/kbar
fast, portable, and extensible cmd+k interface for your site - timc1/kbar
- 75The zero configuration build tool for the web. π¦π
https://github.com/parcel-bundler/parcel
The zero configuration build tool for the web. π¦π. Contribute to parcel-bundler/parcel development by creating an account on GitHub.
- 76A library for development of single-page full-stack web applications in clj/cljs
https://github.com/fulcrologic/fulcro
A library for development of single-page full-stack web applications in clj/cljs - fulcrologic/fulcro
- 77π€ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://github.com/TanStack/table
π€ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
- 78π¬ The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat
π¬ The most complete chat UI for React Native. Contribute to FaridSafi/react-native-gifted-chat development by creating an account on GitHub.
- 79Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://github.com/lukasbach/react-complex-tree
Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop - lukasbach/react-complex-tree
- 80βοΈ A spring physics based React animation library
https://github.com/pmndrs/react-spring
βοΈ A spring physics based React animation library. Contribute to pmndrs/react-spring development by creating an account on GitHub.
- 81Redefined chart library built with React and D3
https://github.com/recharts/recharts
Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub.
- 82Bootstrap components built with React
https://github.com/react-bootstrap/react-bootstrap
Bootstrap components built with React. Contribute to react-bootstrap/react-bootstrap development by creating an account on GitHub.
- 83π» Bear necessities for state management in React
https://github.com/pmndrs/zustand
π» Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.
- 84A framework for building native applications using React
https://github.com/facebook/react-native
A framework for building native applications using React - facebook/react-native
- 85π React Hooks for form state management and validation (Web + React Native)
https://github.com/react-hook-form/react-hook-form
π React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
- 86A build system for development of composable software.
https://github.com/teambit/bit
A build system for development of composable software. - teambit/bit
- 87π» Primitive and flexible state management for React
https://github.com/pmndrs/jotai
π» Primitive and flexible state management for React - pmndrs/jotai
- 88Your window into the Elastic Stack
https://github.com/elastic/kibana
Your window into the Elastic Stack. Contribute to elastic/kibana development by creating an account on GitHub.
- 89A <QRCode/> component for use with React.
https://github.com/zpao/qrcode.react
A <QRCode/> component for use with React. Contribute to zpao/qrcode.react development by creating an account on GitHub.
- 90Realm is a mobile database: an alternative to SQLite & key-value stores
https://github.com/realm/realm-js
Realm is a mobile database: an alternative to SQLite & key-value stores - realm/realm-js
- 91Internationalization for react done right. Using the i18next i18n ecosystem.
https://github.com/i18next/react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem. - i18next/react-i18next
- 92Optimize React performance and make your React 70% faster in minutes, not months.
https://github.com/aidenybai/million
Optimize React performance and make your React 70% faster in minutes, not months. - GitHub - aidenybai/million: Optimize React performance and make your React 70% faster in minutes, not months.
- 93A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://github.com/refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine
- 94βοΈ A React renderer for Figma
https://github.com/react-figma/react-figma
βοΈ A React renderer for Figma. Contribute to react-figma/react-figma development by creating an account on GitHub.
- 95A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
https://github.com/marmelab/react-admin
A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design - marmelab/react-admin
- 96gcal/outlook like calendar component
https://github.com/jquense/react-big-calendar
gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub.
- 97Expo
https://expo.dev/
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
- 98Feature-rich and customizable data grid React component
https://github.com/adazzle/react-data-grid
Feature-rich and customizable data grid React component - adazzle/react-data-grid
- 99Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://github.com/mui/material-ui
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. - mui/material-ui
- 100βοΈ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://github.com/preactjs/preact
βοΈ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. - preactjs/preact
- 101A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
https://github.com/ivanhofer/typesafe-i18n
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. - ivanhofer/typesafe-i18n
- 102Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://github.com/storybookjs/storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation - storybookjs/storybook
- 103Immutable persistent data collections for Javascript which increase efficiency and simplicity.
https://github.com/immutable-js/immutable-js
Immutable persistent data collections for Javascript which increase efficiency and simplicity. - immutable-js/immutable-js
- 104Modern file uploading - components & hooks for React
https://github.com/rpldy/react-uploady
Modern file uploading - components & hooks for React - rpldy/react-uploady
- 105Actor-based state management & orchestration for complex app logic.
https://github.com/statelyai/xstate
Actor-based state management & orchestration for complex app logic. - statelyai/xstate
- 106π Simple and complete React DOM testing utilities that encourage good testing practices.
https://github.com/testing-library/react-testing-library
π Simple and complete React DOM testing utilities that encourage good testing practices. - testing-library/react-testing-library
- 107An enterprise-class UI design language and React UI library
https://github.com/ant-design/ant-design
An enterprise-class UI design language and React UI library - ant-design/ant-design
- 108A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/
https://github.com/pubkey/rxdb
A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/ - pubkey/rxdb
- 109Most modern mobile touch slider with hardware accelerated transitions
https://github.com/nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper
- 110β‘οΈ The Missing Fullstack Toolkit for Next.js
https://github.com/blitz-js/blitz
β‘οΈ The Missing Fullstack Toolkit for Next.js. Contribute to blitz-js/blitz development by creating an account on GitHub.
- 111Full featured HTML framework for building iOS & Android apps
https://github.com/framework7io/framework7
Full featured HTML framework for building iOS & Android apps - framework7io/framework7
- 112A simple and reusable datepicker component for React
https://github.com/Hacker0x01/react-datepicker/
A simple and reusable datepicker component for React - Hacker0x01/react-datepicker
- 113π lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://github.com/yairEO/tagify
π lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue - yairEO/tagify
- 114Zero-runtime CSS in JS library
https://github.com/callstack/linaria
Zero-runtime CSS in JS library. Contribute to callstack/linaria development by creating an account on GitHub.
- 115π A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
https://github.com/downshift-js/downshift
π A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. - downshift-js/downshift
- 116π₯’ A minimalist-friendly ~2.1KB routing for React and Preact
https://github.com/molefrog/wouter
π₯’ A minimalist-friendly ~2.1KB routing for React and Preact - molefrog/wouter
- 117A draggable and resizable grid layout with responsive breakpoints, for React.
https://github.com/react-grid-layout/react-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React. - react-grid-layout/react-grid-layout
- 118Customizable Icons for React Native with support for image source and full styling.
https://github.com/oblador/react-native-vector-icons
Customizable Icons for React Native with support for image source and full styling. - oblador/react-native-vector-icons
- 119A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://github.com/skellock/reactotron
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows. - infinitered/reactotron
- 120A React component for building Web forms from JSON Schema.
https://github.com/mozilla-services/react-jsonschema-form
A React component for building Web forms from JSON Schema. - rjsf-team/react-jsonschema-form
- 121Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
https://github.com/mattermost/mattermost-server
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle.. - mattermost/mattermost
- 122Zero-runtime Stylesheets-in-TypeScript
https://github.com/seek-oss/vanilla-extract
Zero-runtime Stylesheets-in-TypeScript. Contribute to vanilla-extract-css/vanilla-extract development by creating an account on GitHub.
- 123Delightful JavaScript Testing.
https://github.com/facebook/jest
Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub.
- 124Curated List of React Components & Libraries.
https://github.com/brillout/awesome-react-components
Curated List of React Components & Libraries. Contribute to brillout/awesome-react-components development by creating an account on GitHub.
- 125Business logic with ease βοΈ
https://github.com/zerobias/effector
Business logic with ease βοΈ. Contribute to effector/effector development by creating an account on GitHub.
- 126React-specific linting rules for ESLint
https://github.com/yannickcr/eslint-plugin-react
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
- 127π React for interactive command-line apps
https://github.com/vadimdemedes/ink
π React for interactive command-line apps. Contribute to vadimdemedes/ink development by creating an account on GitHub.
- 128tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://github.com/matteobruni/tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use compon...
- 129Device Information for React Native iOS and Android
https://github.com/react-native-device-info/react-native-device-info
Device Information for React Native iOS and Android - react-native-device-info/react-native-device-info
- 130List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
https://github.com/sudheerj/reactjs-interview-questions
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! - sudheerj/reactjs-interview-questions
- 131Cheatsheets for experienced React developers getting started with TypeScript
https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
Cheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/react
- 132babel-relay-plugin
https://www.npmjs.com/package/babel-relay-plugin
Babel Relay Plugin for transpiling GraphQL queries for use with Relay.. Latest version: 0.11.0, last published: 8 years ago. Start using babel-relay-plugin in your project by running `npm i babel-relay-plugin`. There are 73 other projects in the npm registry using babel-relay-plugin.
- 133598fa75e22bdfa44cf47
https://gist.github.com/wincent/598fa75e22bdfa44cf47
GitHub Gist: instantly share code, notes, and snippets.
- 134eyston/relay-composite-network-layer
https://github.com/eyston/relay-composite-network-layer
Contribute to eyston/relay-composite-network-layer development by creating an account on GitHub.
- 135Relay TodoMVC with routing
https://github.com/taion/relay-todomvc
Relay TodoMVC with routing. Contribute to taion/relay-todomvc development by creating an account on GitHub.
- 136Sangria Relay Support
https://github.com/sangria-graphql/sangria-relay
Sangria Relay Support. Contribute to sangria-graphql/sangria-relay development by creating an account on GitHub.
- 137Bringing Modern Web Techniques to Mobile
https://www.youtube.com/watch?v=X6YbAKiLCLU
As we introduce React Native & Relay, learn how we use JavaScript libraries and techniques to help our engineers develop great mobile experiences ever more e...
- 138Use Relay to fetch and store data outside of a React component
https://github.com/acdlite/relay-sink
Use Relay to fetch and store data outside of a React component - acdlite/relay-sink
- 139Use Relay without a GraphQL server
https://github.com/relay-tools/relay-local-schema
Use Relay without a GraphQL server. Contribute to relay-tools/relay-local-schema development by creating an account on GitHub.
- 140Relay + GraphQL + React on Rails
https://github.com/nethsix/relay-on-rails
Relay + GraphQL + React on Rails. Contribute to nethsix/relay-on-rails development by creating an account on GitHub.
- 141React, Relay, GraphQL project skeleton
https://github.com/fortruce/relay-skeleton
React, Relay, GraphQL project skeleton. Contribute to fortruce/relay-skeleton development by creating an account on GitHub.
- 142react-native and relay working out of the box
https://github.com/lenaten/react-native-relay
react-native and relay working out of the box. Contribute to lenaten/react-native-relay development by creating an account on GitHub.
- 143Babel plugin which converts Flow types into Relay fragments
https://github.com/guymers/babel-plugin-flow-relay-query
Babel plugin which converts Flow types into Relay fragments - guymers/babel-plugin-flow-relay-query
- 144:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
https://github.com/lvarayut/relay-fullstack
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS - lvarayut/relay-fullstack
- 145A Go/Golang library to help construct a graphql-go server supporting react-relay.
https://github.com/graphql-go/relay
A Go/Golang library to help construct a graphql-go server supporting react-relay. - graphql-go/relay
- 146React/Relay TodoMVC app, driven by a Golang GraphQL backend
https://github.com/sogko/todomvc-relay-go
React/Relay TodoMVC app, driven by a Golang GraphQL backend - sogko/todomvc-relay-go
- 147Adds server side rendering support to react-router-relay
https://github.com/denvned/isomorphic-relay-router
Adds server side rendering support to react-router-relay - denvned/isomorphic-relay-router
- 148Light, Electron-based Wrapper around GraphiQL
https://github.com/skevy/graphiql-app
Light, Electron-based Wrapper around GraphiQL. Contribute to skevy/graphiql-app development by creating an account on GitHub.
- 149relay-nested-routes
https://www.npmjs.com/package/relay-nested-routes
Nested react-router views for Relay. Latest version: 0.3.1, last published: 9 years ago. Start using relay-nested-routes in your project by running `npm i relay-nested-routes`. There are no other projects in the npm registry using relay-nested-routes.
- 150recompose-relay
https://www.npmjs.com/package/recompose-relay
Recompose helpers for Relay.. Latest version: 0.3.1, last published: 8 years ago. Start using recompose-relay in your project by running `npm i recompose-relay`. There are no other projects in the npm registry using recompose-relay.
- 151Todo example for koa-graphql and relay
https://github.com/chentsulin/koa-graphql-relay-example
Todo example for koa-graphql and relay. Contribute to chentsulin/koa-graphql-relay-example development by creating an account on GitHub.
- 152Utility decorators for Relay components
https://github.com/4Catalyzer/relay-decorators
Utility decorators for Relay components. Contribute to 4Catalyzer/relay-decorators development by creating an account on GitHub.
- 153Build software better, together
https://github.com/relayjs/relay-starter-kit.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 154A very simple starter for React Relay using Browserify
https://github.com/mhart/simple-relay-starter
A very simple starter for React Relay using Browserify - mhart/simple-relay-starter
- 155A thin wrapper for sequelize and graphql-relay
https://github.com/MattMcFarland/sequelize-relay
A thin wrapper for sequelize and graphql-relay. Contribute to MattMcFarland/sequelize-relay development by creating an account on GitHub.
- 156Build software better, together
https://github.com/sequelize/sequelize.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 157A library to help construct a graphql-js server supporting react-relay.
https://github.com/graphql/graphql-relay-js
A library to help construct a graphql-js server supporting react-relay. - graphql/graphql-relay-js
- 158[Deprecated] Relay Classic integration for React Router
https://github.com/relay-tools/react-router-relay
[Deprecated] Relay Classic integration for React Router - relay-tools/react-router-relay
- 159GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
https://github.com/graphql/graphiql
GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. - graphql/graphiql
- 160A library to help construct a graphql-py server supporting react-relay
https://github.com/graphql-python/graphql-relay-py
A library to help construct a graphql-py server supporting react-relay - graphql-python/graphql-relay-py
- 161Facebook Relay talk - Lunch and Learn session
https://www.youtube.com/watch?v=sP3n-nht0Xo
Talk and live demo of Facebook Relay goodness, with a touch of CSS modules and PostCSS. Presented by Albert Still and Alex Savin
- 162An Application Framework For React at react-europe 2015
https://www.youtube.com/watch?v=IrgHurBjQbg
Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their...
- 163Barebones starting point for a Relay application.
https://github.com/relayjs/relay-starter-kit
Barebones starting point for a Relay application. Contribute to facebookarchive/relay-starter-kit development by creating an account on GitHub.
- 164Seamless Syncing for React (VanJS)
http://www.slideshare.net/BrooklynZelenka/relay-seamless-syncing-for-react-vanjs
Relay: Seamless Syncing for React (VanJS) - Download as a PDF or view online for free
- 165Relay - Daniel Dembach - Hamburg React.js Meetup
https://www.youtube.com/watch?v=dvWTxy1eY6s
A recording taken during the meetup of the react.js hamburg group:http://www.meetup.com/Hamburg-React-js-Meetup/events/225186254/
- 166Build software better, together
https://github.com/rmosolgo/graphql-relay-ruby
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 167Build software better, together
https://github.com/graphql/graphiql.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 168an chat example showing Relay with routing and pagination
https://github.com/transedward/relay-chat
an chat example showing Relay with routing and pagination - hungtuchen/relay-chat
- 169Create Relay connections from MongoDB cursors
https://github.com/mikberg/relay-mongodb-connection
Create Relay connections from MongoDB cursors. Contribute to heysailor/relay-mongodb-connection development by creating an account on GitHub.
- 170Build software better, together
https://github.com/codefoundries/UniversalRelayBoilerplate
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 171Getting Started with Relay
https://auth0.com/blog/2015/10/06/getting-started-with-relay/
Learn how to get started with a Relay app and how to protect the GraphQL endpoint with JWT authentication.
- 172π₯ Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI.
https://github.com/kriasoft/nodejs-api-starter
π₯ Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI. - kriasoft/graphql-starter-kit
- 173React with Relay and GraphQL with Andrew Smith
https://www.youtube.com/watch?v=Cfna8gwt9h8
Andrew Smith presents GraphQL in relation to React and Relay.
- 174ReactRelayNetworkLayer with middlewares and query batching for Relay Classic.
https://github.com/nodkz/react-relay-network-layer
ReactRelayNetworkLayer with middlewares and query batching for Relay Classic. - relay-tools/react-relay-network-layer
- 175Create a GraphQL HTTP server with Koa.
https://github.com/chentsulin/koa-graphql
Create a GraphQL HTTP server with Koa. Contribute to graphql-community/koa-graphql development by creating an account on GitHub.
- 176Make Relay work with React Native out of the box Β· Issue #26 Β· facebook/relay
https://github.com/facebook/relay/issues/26
The remaining steps are: Relay/React Native/fbjs versioning Use the appropriate unstableBatchedUpdates depending on React/React Native Version of fetch polyfill for React Native Document the use of...
- 177useHooks βΒ The React Hooks Library
https://usehooks.com/
A collection of modern, server-safe React hooks βΒ from the ui.dev team
- 178Making Sense of React Hooks
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
This week, Sophie Alpert and I presented the βHooksβ proposal at React Conf, followed by a deep dive from Ryan Florence:
- 179not magic, just arrays
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
Untangling the rules around the proposal using diagrams
- 180Color Match - CodeSandbox
https://codesandbox.io/s/jjy215l7w3
Color Match by tannerlinsley using d3-ease, emotion, mo-js, raf, react, react-dom, react-emotion, react-scripts
- 181Counter using useState of React Hooks - CodeSandbox
https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js
Create a Counter using React Hooks with useState
- 182CodeSandbox
https://codesandbox.io/s/m449vyk65x
CodeSandbox is an online editor tailored for web applications.
- 183ppxnl191zx - CodeSandbox
https://codesandbox.io/s/ppxnl191zx
ppxnl191zx using lodash, react, react-dom, react-scripts, react-spring
- 184React Hooks for GraphQL
https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62
How to create custom React hooks to handle common GraphQL operations.
- 185Hooks in react-spring, a tutorial
https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4
Yesterday the React-team finally unveiled their vision of a class-less future in React. Today weβre going to take a look at how to useβ¦
- 186Using the State Hook β React
https://reactjs.org/docs/hooks-state.html
A JavaScript library for building user interfaces
- 187Using the Effect Hook β React
https://reactjs.org/docs/hooks-effect.html
A JavaScript library for building user interfaces
- 188Hooks Todo App - CodeSandbox
https://codesandbox.io/s/9kwyzy0y4
Example app for this post: \n\nhttps://blog.blackbox-vision.tech/making-a-beautiful-todo-app-using-react-hooks-material-ui
- 189useState() and useEffect() - CodeSandbox
https://codesandbox.io/s/yq5qowzrvz
React Hooks: useState() and useEffect() by chris-sev using react, react-dom, react-scripts
- 190Building Your Own Hooks β React
https://reactjs.org/docs/hooks-custom.html
A JavaScript library for building user interfaces
- 191Rules of Hooks β React
https://reactjs.org/docs/hooks-rules.html
A JavaScript library for building user interfaces
- 192Introducing Hooks β React
https://reactjs.org/docs/hooks-intro.html
A JavaScript library for building user interfaces
- 193Everything you need to know about React Hooks
https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349
React just announced a new feature: Hooks. Itβs a brand new set of APIs that enables powerful new ways to share stateful logic betweenβ¦
- 194Hooks at a Glance β React
https://reactjs.org/docs/hooks-overview.html
A JavaScript library for building user interfaces
- 195Hooks FAQ β React
https://reactjs.org/docs/hooks-faq.html
A JavaScript library for building user interfaces
- 196Hooks API Reference β React
https://reactjs.org/docs/hooks-reference.html
A JavaScript library for building user interfaces
- 197React Hooks and Suspense
https://egghead.io/playlists/react-hooks-and-suspense-650307f2
React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more ...
- 198Primer on React Hooks
https://testdriven.io/blog/react-hooks-primer/
An introduction to React Hooks.
- 199React Hook to track the visibility of a functional component
https://github.com/AvraamMavridis/react-intersection-visible-hook
React Hook to track the visibility of a functional component - AvraamMavridis/react-intersection-visible-hook
- 200Manage global state with React Hooks
https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
- 201Managing Web Sockets with useEffect and useState
https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec
Rundown of React Hooks and applying them to a real-time chat room simulation
- 202React Hooks - A deeper dive featuring useContext and useReducer
https://testdriven.io/blog/react-hooks-advanced/
This article looks at how React JS hooks can be used to make React applications and their state management clean and efficient.
- 203jacobp100/hooks-test
https://github.com/jacobp100/hooks-test
Contribute to jacobp100/hooks-test development by creating an account on GitHub.
- 204A set of reusable React Hooks.
https://github.com/beizhedenglong/react-hooks-lib
A set of reusable React Hooks. Contribute to beizhedenglong/react-hooks-lib development by creating an account on GitHub.
- 205Determining screen size type for Bootstrap 4 grid.
https://github.com/pankod/react-hooks-screen-type
Determining screen size type for Bootstrap 4 grid. - pankod/react-hooks-screen-type
- 206A collection of useful React hooks
https://github.com/kitze/react-hanger
A collection of useful React hooks . Contribute to kitze/react-hanger development by creating an account on GitHub.
- 207React Hooks for Firebase.
https://github.com/csfrequency/react-firebase-hooks
React Hooks for Firebase. Contribute to CSFrequency/react-firebase-hooks development by creating an account on GitHub.
- 208[OUTDATED]Ponyfill for the React Hooks API (Support RN)
https://github.com/yesmeck/react-with-hooks
[OUTDATED]Ponyfill for the React Hooks API (Support RN) - yesmeck/react-with-hooks
- 209React's Hooks API implemented for web components π»
https://github.com/matthewp/haunted
React's Hooks API implemented for web components π» - matthewp/haunted
- 210A timer hook for React
https://github.com/thibaultboursier/use-timer
A timer hook for React. Contribute to thibaultboursier/use-timer development by creating an account on GitHub.
- 211React Hooks β π
https://github.com/streamich/react-use
React Hooks β π. Contribute to streamich/react-use development by creating an account on GitHub.
- 212Web. Components. π
https://github.com/palmerhq/the-platform
Web. Components. π. Contribute to jaredpalmer/the-platform development by creating an account on GitHub.
- 213π© A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte
https://github.com/storeon/storeon
π© A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte - storeon/storeon
- 214Use immer to drive state with a React hooks
https://github.com/mweststrate/use-immer
Use immer to drive state with a React hooks. Contribute to immerjs/use-immer development by creating an account on GitHub.
- 215React hook for conveniently use Fetch API
https://github.com/ilyalesik/react-fetch-hook
React hook for conveniently use Fetch API. Contribute to ilyalesik/react-fetch-hook development by creating an account on GitHub.
- 216React hooks implementation of Google's "Thanos" easter egg
https://github.com/codeshifu/react-thanos
React hooks implementation of Google's "Thanos" easter egg - luqmanoop/react-thanos
- 217Learn Advanced React Hooks workshop
https://github.com/kentcdodds/advanced-react-hooks
Learn Advanced React Hooks workshop. Contribute to kentcdodds/advanced-react-hooks development by creating an account on GitHub.
- 218React hooks for convenient react-navigation use
https://github.com/react-navigation/react-navigation-hooks
React hooks for convenient react-navigation use. Contribute to react-navigation/hooks development by creating an account on GitHub.
- 219React Native APIs turned into React Hooks for use in functional React components
https://github.com/react-native-community/react-native-hooks
React Native APIs turned into React Hooks for use in functional React components - react-native-community/hooks
- 220π React Hooks for form state management and validation (Web + React Native)
https://github.com/bluebill1049/react-hook-form
π React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
- 221React Hook for accessing state and dispatch from a Redux store
https://github.com/facebookincubator/redux-react-hook
React Hook for accessing state and dispatch from a Redux store - facebookarchive/redux-react-hook
- 222Use React Hooks for `connect` by markerikson Β· Pull Request #1065 Β· reduxjs/react-redux
https://github.com/reduxjs/react-redux/pull/1065
This PR builds on the previous React-Redux version 6 preview work from #898, #995, aand #1000 . As with the previous couple PRs, the major changes are: Switching from legacy context to createCont...
- 223React Today and Tomorrow and 90% Cleaner React With Hooks
https://www.youtube.com/watch?v=dpw9EHDh2bM
The first three talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.Learn more about Hooks at https://reactjs.org/hooks.
- 224πΆ React hook for making isomorphic http requests
https://github.com/alex-cory/react-usefetch
πΆ React hook for making isomorphic http requests. Contribute to ava/use-http development by creating an account on GitHub.
- 225Stepping through React code
https://youtu.be/JQeB9miT9Wc
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
- 226Using Immer with Reducers and React Hooks
https://youtu.be/FmKjwh34Rn8
Learn how to simplify your reducers with Immer and integrate it with React Hooks.Code: https://github.com/benawad/react-hooks-examples/tree/4_immerLinks from...
- 227Using React Hooks vs. Class Components
https://youtu.be/vbaIZ3xMj9U
I'm planning on using both React Hooks and Class Components.Code: https://github.com/benawad/react-hooks-examples/tree/3_performance_useReducerLinks from vid...
- 228Are React Hooks Slower than Class Components?
https://youtu.be/tKRWuVOEB2w
React Hooks are not slower than Class Components.Starting Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useStateFinished Code: https:...
- 229Building a Todo List with React Hooks useState
https://youtu.be/cAZ-fOd1RpA
A walkthrough of building a Todo List with React Hooks. Specifically, useState.Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useState...
- 230Fetching Data from an API with React Hooks useEffect
https://youtu.be/k0WnY0Hqe5c
Learn how to fetch data from an API using React Hooks useEffect.Code: https://github.com/benawad/react-hooks-examples/tree/2_api_useEffectLinks from video:ht...
- 231React Hooks useContext
https://youtu.be/xWXxkFzgnFM
Learn how to use the React Context API with function components. Using the useContext React Hook.Code: https://github.com/benawad/react-hooks-examples/tree/5...
- 232My Thoughts on React Hooks
https://youtu.be/gmF4k6P2va8
React Hooks is coming in React 16.7 Links from video:https://reactjs.org/docs/hooks-intro.html----If you like cooking, checkout my side project: https://www....
Related Articlesto learn about angular.
- 1Getting Started with React.js: Building Your First App
- 2JSX in React.js: The Gap Between JavaScript and HTML
- 3React Hooks: UseState, UseEffect, and More
- 4Building Reusable Components in React.js: Best Practices Guide
- 5State Management in React.js: Context API vs Redux
- 6Redux Toolkit in React.js: State Management for Complex Applications
- 7Connecting React.js with a REST API: Guide to Fetching Data
- 8Building Real-Time Applications with React and WebSockets
- 9Boosting React.js Performance: Code Splitting and Lazy Loading
- 10Setting Up React.js with TypeScript
FAQ'sto learn more about Angular JS.
mail [email protected] to add more queries here π.
- 1
what are react js components
- 2
how to implement azure ad authentication in react js
- 3
how react js is different from angularjs
- 4
where can i find webpack.config.js in react
- 5
is react faster than javascript
- 6
is react similar to javascript
- 7
is react really necessary
- 8
what will replace react js
- 9
how to call api in react js
- 10
will solid js replace react
- 11
what is routing in react js
- 12
how long would it take to learn react js
- 13
why is react better than javascript
- 14
what are the important topics in react js
- 15
who uses react js
- 16
how to create an app in react js
- 17
can i learn next js without react
- 19
how much it will take to learn react js
- 20
does react js require node js
- 21
how to create app in react js
- 22
why would you use react
- 23
does a react component have to return jsx
- 24
is react worth it
- 25
how to install react js
- 26
is react.js hard to learn
- 27
how react js works
- 28
does react js need node js
- 29
when to use react js
- 30
why react js used
- 31
how to do react js
- 32
is react js free
- 33
who created react
- 34
what is redux in react js
- 35
how long it will take to learn react js
- 36
what we have to learn before react js
- 37
what language does react js use
- 38
how to get data by id in react js
- 39
is react js functional programming
- 40
why react js is faster
- 41
when react js was introduced
- 42
where react js is used
- 43
what is a side effect react
- 44
what is hooks in react js
- 45
does react js use html
- 46
how to install react js in windows
- 47
why react js is a library
- 48
why react js is so popular
- 49
what is component will mount in react js
- 50
who developed react js
- 51
what should i learn before react js
- 52
are react js and react native same
- 53
what are the prerequisites to learn react js
- 54
what is props in react js
- 55
does react js use typescript
- 56
should i use js or jsx in react
- 57
will reactjs die
- 58
is react js dying
- 59
is react losing popularity
- 60
how to call an api in react js
- 61
is react outdated
- 62
- 63
how to do routing in react js
- 64
should i use next js or react
- 65
what react js do
- 66
is react js a framework
- 67
what is react js in hindi
- 68
what does react js do
- 69
what react js is used for
- 70
where to start react js
- 71
do you need node js for react
- 72
what is context api in react js
- 73
how to create dynamic id in react js
- 74
which react framework is best
- 75
what is react side effects
- 76
where we use react js
- 77
will next js replace react
- 78
why should we use react js
- 79
what are the features of react js
- 80
what are react js hooks
- 81
does react js have future
- 82
where is webpack.config.js in react
- 83
why react js is important
- 84
how to get dynamic id in react js
- 85
does react.js create a virtual dom in the memory
- 86
can react js be used for backend
- 87
when was react js created
- 88
where is react-native.config.js
- 89
where to learn react js
- 90
is react js easy to learn
- 91
when to learn react js
- 92
is react javascript
- 93
how to do form validation in react js
- 94
what does strict mode do in react js
- 95
what are states in react js
- 96
will vue js overtake react
- 97
how does react js work
- 98
how to learn react js
- 99
how to do unit testing in react js
- 100
why react js is declarative
- 101
what are props in react js
- 102
how to create an api in react js
- 103
would react be dead
- 104
how to create an array in react js
- 105
is react js frontend or backend
- 106
how to use navigate in react js
- 107
what is state in react js
- 108
how to create an object in react js
- 109
is react js still relevant
- 110
should i learn next js or react
- 111
how to fetch data using id in react js
- 112
how to pass dynamic id in react js
- 113
why react js is better than angular
- 114
how much js should i know to learn react
- 115
how to do pagination in react js
- 116
where to code react js
- 117
do you have to use react with jsx
- 118
is react js a framework or library
- 119
can react js be used for mobile apps
- 120
why react js is popular
- 121
how to add image in react js
- 122
who owns react js
- 123
what should i learn after react js
- 124
who developed react
- 125
why do we use react js
- 126
is react js in demand
- 127
which companies use react
- 128
what are react js and node js
- 129
is react js a language
- 130
what is jsx in react
- 131
why react js is better
- 132
who created react js
- 133
when to use next js over react
- 134
how react js works internally
More Sitesto check out once you're finished browsing here.
https://www.0x3d.site/
0x3d is designed for aggregating information.
https://nodejs.0x3d.site/
NodeJS Online Directory
https://cross-platform.0x3d.site/
Cross Platform Online Directory
https://open-source.0x3d.site/
Open Source Online Directory
https://analytics.0x3d.site/
Analytics Online Directory
https://javascript.0x3d.site/
JavaScript Online Directory
https://golang.0x3d.site/
GoLang Online Directory
https://python.0x3d.site/
Python Online Directory
https://swift.0x3d.site/
Swift Online Directory
https://rust.0x3d.site/
Rust Online Directory
https://scala.0x3d.site/
Scala Online Directory
https://ruby.0x3d.site/
Ruby Online Directory
https://clojure.0x3d.site/
Clojure Online Directory
https://elixir.0x3d.site/
Elixir Online Directory
https://elm.0x3d.site/
Elm Online Directory
https://lua.0x3d.site/
Lua Online Directory
https://c-programming.0x3d.site/
C Programming Online Directory
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
https://r-programming.0x3d.site/
R Programming Online Directory
https://perl.0x3d.site/
Perl Online Directory
https://java.0x3d.site/
Java Online Directory
https://kotlin.0x3d.site/
Kotlin Online Directory
https://php.0x3d.site/
PHP Online Directory
https://react.0x3d.site/
React JS Online Directory
https://angular.0x3d.site/
Angular JS Online Directory