{"library":"react-build-info","title":"React Build Info Generator","description":"react-build-info is a development utility designed for React projects to automatically inject build-time metadata into the application. It reads the project's `package.json` file to extract the `version` and combines it with the current date/time to generate a `src/buildInfo.ts` (or `.js`) file. This file contains an exported constant `buildInfo` with `buildVersion` and `buildDate` properties, making build information easily accessible within the React application for debugging, support, or display purposes. The current stable version is `0.0.3`. This package is a low-churn utility, receiving updates primarily as needed to maintain compatibility or address specific issues. Its key differentiator is its simplicity and direct file generation approach, avoiding the overhead of more complex build tool plugins.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-build-info"],"cli":null},"imports":["import { buildInfo } from './buildInfo';","import React from 'react';","type BuildInfoType = { buildVersion: string; buildDate: number; };"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { buildInfo } from './buildInfo'; // Correct import for named export\n\nimport './App.css'; // Assuming standard React app structure\n\nconst buildDate = new Date(buildInfo.buildDate);\n\nclass App extends React.Component {\n\n  componentDidMount() {\n    console.log(`Application Build Number: ${buildInfo.buildVersion}`);\n    console.log(`Application Build Date: ${buildDate.toLocaleString()}`);\n    // You could also send this info to an analytics service or display it in a footer\n  }\n\n  render() {\n    return (\n      <div className=\"App\">\n        <header className=\"App-header\">\n          <h1>My Application</h1>\n          <p>Version: {buildInfo.buildVersion}</p>\n          <p>Built On: {buildDate.toLocaleDateString()} {buildDate.toLocaleTimeString()}</p>\n        </header>        \n        <main>\n          <p>Welcome to the app!</p>\n        </main>\n        <footer>\n          <p>Powered by React</p>\n        </footer>\n      </div>\n    );\n  }\n}\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates how to integrate `react-build-info` into your React project's `package.json` build script and then consume the generated build information within a React component. This setup ensures that your application always displays the correct version and build timestamp, which is invaluable for debugging and support. Remember to add `\"build\": \"npm version patch && react-build-info && react-scripts build\"` to your `package.json` scripts section.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}