ftl - the fast template language for React UI components.
ftl is a fast template language for React UI components. It is a superset of the ES6 template literal syntax, with a few additional features to make it easier to write React components.
Box
Grid container spacing={2}
Grid item xs={6}
Typography variant="h3" (Welcome to ${id} Staking Pool!!)
Typography variant="subtitle1" (stake your tokens to earn more tokens)is converted to:
<Box>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="h3">Welcome to {id} Staking Pool!!</Typography>
<Typography variant="subtitle1">stake your tokens to earn more tokens</Typography>
</Grid>
</Grid>
</Box>Usage:
const template = ftl`
Box
Grid container spacing={2}
Grid item xs={6}
Typography variant="h3" (Welcome to ${id} Staking Pool!!)
Typography variant="subtitle1" (stake your tokens to earn more tokens)
`
const Component = template({id: 'My Pool'})
ReactDOM.render(<Component />, document.getElementById('root'))npm install ftl
or
yarn add ftl
ftl template files are just .ftl files. They can be imported into your
typescript or javascript files, and then used to create React components.
import template from './template.ftl'
const Component = template({id: 'My Pool'})
ReactDOM.render(<Component />, document.getElementById('root'))ftl template strings are just template strings. They can be used to create React components.
const template = ftl`
Box
Grid container spacing={2}
Grid item xs={6}
Typography variant="h3" (Welcome to ${id} Staking Pool!!)
Typography variant="subtitle1" (stake your tokens to earn more tokens)
`
const Component = template({id: 'My Pool'})
ReactDOM.render(<Component />, document.getElementById('root'))ftl template functions are just functions. They can be used to create React components.
const template = ftl`
Box
Grid container spacing={2}
Grid item xs={6}
Typography variant="h3" (Welcome to ${id} Staking Pool!!)
Typography variant="subtitle1" (stake your tokens to earn more tokens)
`
## run the tests
`npm test`
## License
MIT