Flesch Gauge
Universal reactive component for displaying copy readability using the Flesch Reading Ease formula.
Vanilla ES6+
import FleschGauge from 'flesch-gauge'
const fleschGauge = new FleschGauge({
target: document.querySelector('#flesch-gauge-container'),
props: {
content: "This is the content to be measured."
},
})
Vue
<template>
<div>
<FleschGauge :content="content">
</div>
</template>
<script>
import FleschGauge from 'flesch-gauge/vue'
export default {
name: 'app',
components: {
FleschGauge,
},
data() {
return {
content: "This is the content to be measured."
}
},
}
</script>
React
import React from 'react';
import FleschGauge from 'flesch-gauge/react'
const content = "This is the content to be measured."
const App = () => <FleschGauge content={content}/>
export default App;