![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@tenon-io/tenon-codeblock
Advanced tools
This is an accessible code-block component, built in React, for displaying styled code snippets in your application.
It is part of the tenon-ui
toolkit.
The code block is built on react-syntax-highlighter with some contrast tweaks for accessibility and helpers to assist keyboard navigation.
Features:
##Install
npm install @tenon-io/tenon-codeblock
or
yarn add @tenon-io/tenon-codeblock
##Usage
###With a source file
The tenon-codeblock
will autofetch a file hosted on your server and display the contents. This
allows easy display of code files and ensuring that online examples remain up-to-date.
With a file called tabs.js
hosted in the /code/examples
path of your website, the code
block is used as:
import CodeBlock from '@tenon-io/tenon-codeblock'
//...
<CodeBlock file="/code/examples/tabs.js" />
//...
###With a source string
import CodeBlock from '@tenon-io/tenon-codeblock'
//...
const codeString =
' <section>\n' +
' <h2>Code block reading from a file</h2>\n' +
' <CodeBlock\n' +
' file="codeExample.js"\n' +
' onReset={() => {\n' +
" console.log('reset 2');\n" +
' }}\n' +
' />\n' +
' </section>\n';
//...
<CodeBlock codeString={codeString} />;
//...
##Languages
The code block supports the following languages:
By default the code block is configured for JSX
. To set this to another language
use the language
prop.
<CodeBlock file="codeExample.js" language="javascript" />
##Auto undo of accidental edits
To support better interaction with the text, the code block is editable. Any accidental changes the user makes is reset when the code block loses focus.
This may cause some unexpected content changes on your page so the code block exposes
an onReset
event that gets fired if any changes are reset.
You can use this to signal to notify the user of this change in a way best suited to your application.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.onResetHandler = this.onResetHandler.bind(this);
}
onResetHandler() {
//Notify the user.
}
render() {
return (
<CodeBlock
file="/code/examples/tabs.js"
onReset={this.onResetHandler}
/>
);
}
}
FAQs
Tenon ui code display block
The npm package @tenon-io/tenon-codeblock receives a total of 5 weekly downloads. As such, @tenon-io/tenon-codeblock popularity was classified as not popular.
We found that @tenon-io/tenon-codeblock demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.