readease

Here's the revised README with the updated explanation for useCycleVersion:

Readease for React

Readease is a React component designed to enhance text accessibility for users. This supports features like simplified text versions, customisable themes, and accessibility-friendly fonts (such as OpenDyslexic).

Features

• Display multiple versions of text (full and simplified).
• Easily toggle between text versions.
• Support for dyslexia-friendly fonts like OpenDyslexic.
• Customisable themes using styled-components.

Installation

Install Readease as an npm package in your project.

npm install readease

Usage

Step 1: Importing and Using Readease

You can use the Readease component in your project by passing in the text, simplified text versions, and optionally customising the theme or font.

import Readease from 'readease';

function App() {
    const description = "Web accessibility refers to ensuring that people with disabilities can interact with websites on the World Wide Web.";

    const simplifiedTexts = [
        "Web accessibility means making sure everyone can use websites, even if they have disabilities or slow internet.",
        "Web accessibility ensures that websites are easy for everyone to use."
    ];

    return (
        <div>
            <h1>Accessible Text Display</h1>
            <Readease
                description={description}
                simplifiedTexts={simplifiedTexts}
                useCycleVersion={true}
                useSpeakText={true}
                customFont="OpenDyslexic"
            />
        </div>
    );
}

export default App;

Step 2: Customising the Theme

You can customise the look and feel of Readease by passing a customTheme object directly to the component.

Example of Custom Theme:

const customTheme = {
    colors: {
        background: '#f4f4f9',
        text: '#333333',
        primary: '#4A90E2',
        button: '#FFB74D',
        secondary: '#8BC34A',
        buttonHoverBg: '#FF7043',
        icon: '#FFFFFF',
        buttonHover: '#37474F',
    },
    typography: {
        fonts: {
            primary: 'Verdana, sans-serif',
            secondary: 'OpenDyslexia, sans-serif',
        },
    },
    spacing: {
        sm: '0.5rem',
        md: '1rem',
    },
    borderRadius: {
        round: '50%',
    },
};

Apply the custom theme to the Readease component:

<Readease
    description="Web accessibility means..."
    simplifiedTexts={["Simplified version 1", "Simplified version 2"]}
    customTheme={customTheme}
    useCycleVersion={true}
    useSpeakText={true}
/>

Step 3: Customising the Readease Component

You can pass various props to customise how the Readease component behaves.

• description: The full version of the text.
• simplifiedTexts: An array of simplified text versions.
• useCycleVersion: A toggle to activate or deactivate the entire component (default: true). When set to false, the component is deactivated. This feature is useful if you want to toggle the component on and off, though its necessity is rare.
• useSpeakText: Whether to enable text-to-speech functionality (default: true).
• customFont: A custom font to apply (e.g., "OpenDyslexic").
• customTheme: An optional theme object to override default styling.

Example:

<Readease
    description="This is the original version of the text."
    simplifiedTexts={[
        "This is a simplified version.",
        "This is an even more simplified version."
    ]}
    useCycleVersion={true}
    useSpeakText={true}
    customFont="OpenDyslexic"
    customTheme={customTheme}
/>

Conclusion

With Readease, you can easily integrate accessible text components into your React application. The customisable theme options and support for multiple text versions make it an ideal solution for improving accessibility in web applications.